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.

436317011_7662173430472747_6576034351866042768_n.mp4

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).

Screen.Recording.2024-05-10.at.11.23.22.mov

[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.
#21144 (comment)

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.