Apex Charts causing page rendering lag when scrolling in iOS

[jottin]

I have created a simple pattern library with Apex Charts using static data. The issue I've experienced has literally took me days to isolate since debugging on iOS can be challenging. I have tried every layout work-around in CSS but no luck. Whenever Apex is running on the page (in this case at the bottom if you scroll all the way down), and you start scrolling from the top of the page, there is an obvious delay in the content being rendered. Note: the lag in page rendering is much worse as the page gets longer and when there is more content.

Steps to Reproduce: While this may be related to only my situation (just not sure yet), I have created two demos showing the issue. Again, this is ONLY reproducible on iOS in Chrome and Safari.

Expected Behavior: No lag in page rendering upon scrolling especially when Apex Charts is not yet visible in the viewport (but it has been loaded on the page). In other words, Apex Charts shouldn't affect scrolling performance when not visible.

Actual Behavior: Upon scrolling, all other page content loads slowly/choppy despite Apex Charts not yet visible in the viewport (although it has been loaded further down the page).

Screenshots (taken in Chrome on iPad):

Here is a link to a test version I made on my server (just html and apex running): https://visualcraftsman.com/debug/components_test1.html

--UPDATE-- In the link above to the test page, I have stripped out everything but HTML and Apex scripts. On iPad running 16.3.1 in Safari and Chrome, I still see a blink when scrolling down the page before Apex comes into view. The delay is much faster obviously since I have reduced the page load time by removing almost everything... but the fact remains that there is still a very slight lag during scroll on iOS. As mentioned above, adding more resources and content to the page only worsens this behavior.

Here is another screenshot taken while scrolling down the page quickly...

Since opening this bug, I have replaced Apex with Frappe Charts in my project and the scrolling issue has been resolved. I also removed Apex libraries from the demo. So, viewing the test page will no longer work.

Thanks, J

[brianlagunas]

There is a lot going on in this repo app. I would recommend removing everything except the charts and see if you still have the issue. We need a minimal reproduction sample. With so much content in this sample, it will be difficult to narrow down the issue. The sample should be the absolute bare minimum.

[jottin]

Understandable. Thought I'd show a little context. At any rate, I can safely say that the flicker is still happening even with nothing but HTML and Apex loaded. I have updated the post and link to my test page.

[jottin]

Below is a link to an animated gif showing what is happening during scroll... every time the page is scrolled, Apex Charts is refreshing which seems to be affecting the rest of my page.

https://drive.google.com/file/d/1YBfYDejKFkPfNpy13MQC_HXU70YdD9J-/view?usp=sharing

[milonas115]

An update to this thread would be welcoming ..... A performance snapshot of a chart with about 100 datapoints shows node loop lag in the 100ms+ range when scrolling .... Most of it stemming from svg.js