The chart and browser freeze when active scrolling

[EvgeniyDEM]

Actual behaviour

Latest Chrome for Android update Active scrolling (swipe + touching) causes the chart and browser to freeze.

Live demo with steps to reproduce

https://www.highcharts.com/demo/stock/data-grouping

Product version

Highstock v11 (with rollback to v9)

Affected browser(s)

Chrome for android beginning with v124.0.6367.113

Affected device(s)

Samsung s24 Samsung A6 Lenovo P2

[noidar]

I experience the same issue!

[raf18seb]

Hi guys!

Thanks for reporting the issue.

Unfortunately, we weren't able to reproduce it in both Chrome v123 and v124 (124.0.6367.159) on a Samsung S22 Ultra with Android 14 (April 2024), see the video below.

https://github.com/highcharts/highcharts/assets/23310742/5c2cc1e9-501e-4c4e-8133-c27e15860fc0

Could you provide more information that would help us pinpoint the issue?

[dkowcun]

Hey, here is the the chart that I can reproduce the issue with: https://www.highcharts.com/demo/highcharts/line-time-series using regular desktop Chrome (124) and mobile view. When you click on the series it freezes (sometimes for a veeery long time).

https://github.com/highcharts/highcharts/assets/9152269/f5741b03-6429-47ff-a04d-c0baf964a792

[noidar]

Hello, I will provide more information specifically on my case.

Latest Chrome 124.0.6367.119 (Official Build) (arm64), turn in mobile preview. Active touching the chart (swipe + touching) causes the chart and browser to freeze. Main thread is blocked for around 10s to 30s.

https://www.highcharts.com/demo/highcharts/line-time-series

I uploaded video screen recorder to youtube because of the github limitation to 10mb. https://www.youtube.com/watch?v=uiBle_JCCec&ab_channel=RadionNoidar

[JJSLIoT]

We are facing the same issue on the latest version of Chrome: 124.0.6367.159 & Android System WebView: 124.0.6367.123. I rolled back Chrome / Android System WebView updates to version: 120.x and I can confirm that the above-reported performance issues are not present on older versions of Webview.

[EvgeniyDEM]

Hi @raf18seb Please try https://jsfiddle.net/Jein/auqs760v/ I use

dataGrouping: {
      groupPixelWidth: 0.5,
}

Before update Chrome Android v124.0.6367.113 the chart worked smoothly even with ~370,000 points Without module boost

[JJSLIoT]

We are facing the same issue on the latest version of Chrome: 124.0.6367.159 & Android System WebView: 124.0.6367.123. I rolled back Chrome / Android System WebView updates to version: 120.x and I can confirm that the above-reported performance issues are not present on older versions of Webview. https://github.com/highcharts/highcharts/issues/21144#issuecomment-2104345707

Additionally, the issue is observed on Beta and Canary flavors of Android System WebView as well. Beta version: 125.0.6422.34 Canary: 126.0.6470.0

[karolkolodziej]

Thank you all for engaging in the discussion! I was able to recreate it with a Chrome emulator. We will investigate and determine where is the source of the issue.

[karolkolodziej]

The issue was already reported on the Chromium see: https://issues.chromium.org/issues/337338049

It looks like the issue is on the Chrome side but I was able to apply the suggested workaround successfully- demo. You need to add the pointer-events to the chart's main container as shown in the code snippet bellow:

#container {
  pointer-events: fill;
}

[noidar]

The issue was already reported on the Chromium see: https://issues.chromium.org/issues/337338049

It looks like the issue is on the Chrome side but I was able to apply the suggested workaround successfully- demo. You need to add the pointer-events to the chart's main container as shown in the code snippet bellow:

#container {
  pointer-events: fill;
}

Thank you very much @karolkolodziej for a fast solution.