Android chrome crashes on opening demo page

[anki247]

Expected behaviour

The chrome works fluently and is reacting to user touch motion. And does not crash at the end

Actual behaviour

By opening the demo https://www.highcharts.com/demo/line-time-series on android chrome version 78.0.3904.62 (latest currently). Chrome freezes and at the end it crashes.

Additional Info: The issue occurs on following devices
Android 9 and 10
Samsung s8, s9 and s10 & OnePlus 7 pro

Live demo with steps to reproduce

Update android chrome to version 78.0.3904.62.
And open https://www.highcharts.com/demo/line-time-series

Product version

live demo page

Affected browser(s)

Only the newest android chrome v78.0.3904.62

[koverda]

Same on pixel 3, android chrome 78.0.3904.62

[anki247]

This is actually quit urgent issue, since we have lot of charts on all over the website and they are not accessable and has huge negative impact for UX

[pawelfus]

Thanks for reporting this issue!

Tested with Android v9.0:

• v76.0.3809.132 - no problems
• v77.0.3865.116 - no problems

Tested with Android v9.1

• v78.0.3904.62 - frozen Chrome

[koverda]

Any updates?

[sebastianbochan]

The BrowserStack don’t have v78 yet, but our developers (@jon-a-nygaard and @oysteinmoseng ) are now debugging on physical devices.

[jon-a-nygaard]

From our investigation so far it seems that there has been a performance decrease in the rendering of complex SVG in Android Chrome v78.0.3904.62. In this example it is paths with large strokes.

We isolated the issue to a relatively simple svg with a few elements, where one of the elements transform attribute is updated with a fast interval.
By opening the show page below in Android Chrome v78.0.3904.62 you can see that it will freeze for a while before it sometimes catches up and performs as it should. In previous versions it runs smoothly from the beginning.

• JSFiddle example
• Example show page

We have reported the issue to the Google Chrome Support, and hope that they may be able to solve the issue, or give further insights to what is causing the issue.

[anki247]

@jon-a-nygaard Any feedback from Google chrome?
Could you pls add link to the issue report? Thx

[jon-a-nygaard]

Hi @anki247,

I have unfortunately not received any feedback from Google Chrome Support, and their issue reports is sadly not available in public.

Good news though, is that today I found that the issue could also be reproduced in Chromium as well, and I have reported it to The Chromium Projects. This issue report is available at https://bugs.chromium.org/p/chromium/issues/detail?id=1022314

For those interested in testing on Chromium, the Android app can be downloaded from https://download-chromium.appspot.com/

[anki247]

@jon-a-nygaard
Pls have a look on those demo, I accidentally found one page where the exact same chart was rendering without any error.
After spending hours I found out that some HTML structure and CSS class/rule have some impact.

• JSFiddle example
• Example show page

The only different of this JSFiddle from your example is the CSS part AND this HTML before the chart. But here it works perfectly on android chrome :-S

<!-- Begin diff -->
<div class="test-list">
  <div class="test-item">
    abc
  </div>
  <div class="test-item">
    cde
  </div>
</div>
<!-- End diff -->
 

[jon-a-nygaard]

Thanks @anki247,

That is an interesting observation! I do not know what this means technically, but I have passed on the information to the The Chromium Projects in hope that this will help their progress.

[koverda]

@anki247 awesome. I just put this in the same color as the background of my page where the charts live, and it seems to have fixed the problem. Great workaround for now

[baerrach]

@anki247 Do you have a jsfiddle that show's it crashing, and what the exact changes you made to stop it crashing?

[anki247]

@baerrach
Crashing:

• https://jsfiddle.net/jon_a_nygaard/1c7Lpefm/
• https://jsfiddle.net/jon_a_nygaard/1c7Lpefm/show

"Workaround": (It actually was not intended to be a workaround.. more a demo ^^)

• https://jsfiddle.net/6w59qaod/11/
• https://jsfiddle.net/6w59qaod/11/show

As I mentioned above the difference between them is just the

• CSS part
• following HTML part above the chart

<!-- Begin diff -->
<div class="test-list">
  <div class="test-item">
    abc
  </div>
  <div class="test-item">
    cde
  </div>
</div>
<!-- End diff -->

[sebastianbochan]

Thank you for details and workaround!

[oyatek]

Hi highcharts team!

Do you have any updates on this issue? Did you get any response from the Chrome team? We develop an application that is using SVG and we have exactly the same problem in Chrome@Android. I tried to find a solution in Google and only one page that I've found is this thread. We've tried to use the workaround posted above but unfortunately, it didn't work for us.

[sebastianbochan]

The reported issue is still valid. You can check the current status of case here: https://bugs.chromium.org/p/chromium/issues/detail?id=1022314

[svenstorp]

We see this issue with almost all the data sets we are trying to chart. Since this is obviously a longrunner over at Google, is there more known workarounds than @anki247's findings above (which doesn't seem to work in our case)? Different chart-types? Max number of samples?

[AlexImb]

Using Highcharts Boost helps, especially on mobile devices.

Reducing the data points density also helps. Depending on how many series and charts you have to render on a page, a maximum of 500 data points per series seems to render smoothly on most devices. You can make the amount of data points dependent on the screen width.

[nunoarruda]

It looks like the Chromium issue was closed: https://bugs.chromium.org/p/chromium/issues/detail?id=1022314

Also, comment 17 on the Chromium issue says "Since Chrome 89 for Android this issue is fixed".

I personally will keep using the workaround in case some users are using older versions of Chrome on Android.

[induratized]

It looks like the Chromium issue was closed: https://bugs.chromium.org/p/chromium/issues/detail?id=1022314

Also, comment 17 on the Chromium issue says "Since Chrome 89 for Android this issue is fixed".

I personally will keep using the workaround in case some users are using older versions of Chrome on Android.

This chromium bug was recently observed again in chrome version 121+ and the chromium bug was updated with Steps to reproduce, basically Chromium wasn't able to handle complex svg's and the Hit test ran into 100% cpu utilisation.

Chromium Bug Link : https://issues.chromium.org/issues/40657525