Delay is now occurring on smartphone's Chrome browser (version 72 or later)

as24

Nice to meet you. I am using datatables in Japan.
I am creating my own site in Wordpress.

I am sorry for my poor English, but I have posted it using Google Translate because a problem is happening.

I display data with columns of up to 250 rows and 80 columns on the site using datatables.

The problem is happening at the time of browsing on a smartphone (Android).

Previously, the table and the page of the site were displayed with a response which does not hinder practical use.

However, since the introduction of Google Chrome version 72, problems began to occur in response.

There is a phenomenon that display of the page itself becomes delayed and it becomes hardened until the table becomes completely active.

The reason why we can say that there is a problem in version 72 or later is that downgrading the browser version will return to the same response as before.
Also, this phenomenon has not happened with FireFox and others. And Chrome on the desktop has no problem.

I would like to ask two questions.

There seem to be some major changes in Chorme's version 72, but can such a phenomenon occur if the specification of the browser changes?

Is this due to the mechanism of datatables? Or is it possible to improve by changing my coding?

I will list several things I have attempted.

1.Reduce the number of columns and the number of rows in the initial display
2.deferRender: true (this was previously set)
3.OrderClasses: false
4.Reduce right display of data display and change of text color etc.

None of them changed significantly.

I am sorry for a vague question. But I'm happy if I can grasp the clues for improvement.
If there is something to think about, would you please tell me?

The site I am creating is this URL.
https://sumo-guide.com/banduke-jyonidan

The issue is occurring on Chrome browser on smartphone (Android) version 72 or later.
iphone is unverified.

I apologize for not being able to prepare because I can not understand how to create a test case so much.

`

<

table id="banduke" class="table_banduke">
var num = screen.height;
var table = $("#banduke").DataTable({
data:jsonData,
columns: [
{ data: "c1" },
{ data: "c2" },
{ data: "c3" },
{ data: "c4" },
~~~~~~
{ data: "c74" }
],
order: [],
orderFixed: {
"post": [ 0, 'asc' ]
},
scrollY: num + "px",
scrollX: true,
scrollCollapse: true,
orderClasses: false,
processing:true,
searchDelay: 600,
info:true,
deferRender: true,
[pc]
dom: 'Bfrtlip',
[/pc]
[nopc]
dom: 'lrtpB',
[/nopc]
buttons: [
{
extend: 'colvisGroup',
text: 'simple',
show: ['.start','.yomi','.seiseki0','.kihon'],
hide: ['.rireki','.reki0','.seiseki1','.seiseki1e','.seiseki2','.seiseki3','.seiseki4','.seiseki5','.seiseki6','.seisekiK','.seisekiN','.kihon2']
},
{
extend: 'colvisGroup',
text: '2',
show: ['.seiseki0','.seiseki1','.kihon'],
hide: ['.yomi','.rireki','.seiseki1e','.seiseki2','.seiseki3','.seiseki4','.seiseki5','.seiseki6','.seisekiK']
},
{
extend: 'colvisGroup',
text: 'basic',
show: ['.kihon','.kihon2','.reki0','.seisekiN','.rekiT'],
hide: ['.seisekiK','.seiseki','.reki1','.reki2','.reki3','.reki4','.reki5']
},
{
extend: 'colvisGroup',
text: 'history',
[pageck 1]
show: ['.reki0','.reki1','.reki2','.reki3','.reki4','.reki5','.rekiY','.rekiS'],
[/pageck]
[pageck oz]
show: ['.reki0','.reki1','.reki2','.reki3','.reki4','.rekiY','.rekiS'],
[/pageck]
[pageck san]
show: ['.reki0','.reki1','.reki2','.reki3','.rekiY','.rekiS'],
[/pageck]
[pageck mu]
show: ['.reki0','.reki1','.reki2','.rekiY','.rekiS'],
[/pageck]
[pageck jr]
show: ['.reki0','.reki1','.rekiY'],
[/pageck]
[pageck ms]
show: ['.reki0','.rekiY'],
[/pageck]
hide: ['.seiseki','.seisekiK','.seisekiN','.kihon','.kihon2']
},
{
extend: 'colvisGroup',
[pc]
text: '6',
[/pc]
[nopc]
text: '6',
[/nopc]
show: ['.seiseki','.seisekiK'],
hide: ['.reki0','.rireki','.kihon','.kihon2','.seisekiN']
}
],

paging: true,
pageLength: 10,
lengthChange: true,
columnDefs: [
{ targets: 'start', visible: true },
[pc]
{ targets: 'yomi', visible: true },
[/pc]
{ targets: '_all', visible: false },
{ orderData: 2, targets: 1 },
{ orderData: 3, targets: 4 },
{ orderData: 6, targets: 7 },
{ orderData: 9, targets: 10 },
{ orderData: 12, targets: 13 },
{ orderData: 17, targets: 18 },
{ orderData: 22, targets: 23 },
{ orderData: 27, targets: 28 },
{ orderData: 32, targets: 33 },
{ orderSequence: [ "desc", "asc"], targets:37},
{ orderSequence: [ "desc", "asc"], targets:39},
{ orderSequence: [ "desc", "asc"], targets:44},
{ orderSequence: [ "desc", "asc"], targets:46},
{ orderSequence: [ "desc", "asc"], targets:50},
{ orderSequence: [ "desc", "asc"], targets:51},
{ orderSequence: [ "desc", "asc"], targets:52},
{ orderSequence: [ "desc", "asc"], targets:67},
{ orderSequence: [ "desc", "asc"], targets:68},
{ orderSequence: [ "desc", "asc"], targets:69},
{ orderSequence: [ "desc", "asc"], targets:70},
{ orderSequence: [ "desc", "asc"], targets:71},
{ orderSequence: [ "desc", "asc"], targets:72},
{ orderSequence: [ "desc", "asc"], targets:73},
{targets: [ 38 ], orderData: [ 38, 0 ]},
{ className: "honmyou", "targets": [ 'honmyou' ] },
[pc]
{ className: "hidari", "targets": [ 48,49 ] },
{ className: "migi", "targets": [ 0,8,14,19,24,29,34,39,45,46,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73 ] },
[/pc]
[pc]
{"targets": [0],
"createdCell": function (td, cellData, rowData, row, col) {
if ( cellData.indexOf('☆') != -1) {
$(td).css('color', 'red')
}
}
},
{"targets": [8],
"createdCell": function (td, cellData, rowData, row, col) {
if ( cellData.indexOf('☆') != -1) {
$(td).css('color', 'red')
}
}
}
],
fixedColumns: {
leftColumns: 2
}
});`

colin

Hi @as24 ,

There's a lot going on there - I looked at your page in both Firefox and Chrome, and it looks the same. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

as24

Thank you for your reply.
I heard that you checked with FireFox and Chrome, is it a smartphone?
Normally it will be fully active in about 1 - 2 seconds, but now hardens nearly 30 seconds. It is very slow.

I must apologize for asking questions without preparing a test case. I'm sorry.

However, I attempted to create a test case again, but I could not get it to work well.

http://live.datatables.net/lecojivu/1/edit?html,css,js,console,output
I made it half way, but it was useless.

I know that it is difficult to answer with lack of information.

I'm sorry to have trouble you.
I will trial and error on my side.

Thank you very much.