Performance on Safari is very slow, barely works

[travisryan]

Mike, per our email discussion I'm creating this issue on the terrible performance of Safari (both Mac and iOS) of rendering the odometer in action.
From internet searches I believe changing the translate(X,Y) to a translate3d(X,Y,0) I think it would make safari render it with hardware acceleration and then it would look right.
Here are a couple links. It seems it might be back in Safari 14 or so that they made this change to help battery performance perhaps.
https://www.urbaninsight.com/article/improving-html5-app-performance-gpu-accelerated-css-transitions
https://stackoverflow.com/questions/9807620/ipad-safari-scrolling-causes-html-elements-to-disappear-and-reappear-with-a-dela

Thanks!
Travis

[coderitual]

thanks for reporting @travisryan !

[coderitual]

Upon analyzing the issue, I've identified several factors that might contribute to the slow performance. However, the two most significant factors include:

• Constant layout recalculation in each frame
• Non-GPU accelerated painting

Although the first factor could pose a problem, it does not appear to be the primary bottleneck. After conducting some tests, I found that the blur filter significantly underperforms.

The default configuration applies a motion blur to SVG nodes, which seemingly does not benefit from GPU acceleration. This can be corroborated by observing the substantial amount of time spent on the painting process. Given that we haven't yet addressed the layout reflow issue, it's evident that enhancing the painting process will lead to a substantial improvement in performance.

[travisryan]

Interesting....

[travisryan]

@coderitual Any more progress on this? Anything I can concentrate on to help etc?

[travisryan]

Any updates Mike? Would REALLY appreciate it! :)

[coderitual]

Hey @travisryan , it seems that it is not going to be trivial since those svg filters are not hardware accelerated. There are couple things we may try to replicate this effect using different approaches. Not sure if we are able to achieve exactly the same without going fully canvas or webgl (which has other drawbacks). We may also try using simpler css filter or some sort of caching (e.g.pregenerating digits with blur).

All those things need some ground work and I am afraid will be time consuming. My suggestion for now would be to add an option to disable motion blur filter so at least it can be used on safari and maybe older devices. Feel free to open a PR for adding this option, I will help you to go through it.