Issue metadata
Sign in to add a comment
|
CSS transforms are super slow, makes scrolling janky on Chrome 50+ on Android + windows
Reported by
dharm...@gmail.com,
May 24 2016
|
||||||||||||||||||||||||
Issue descriptionTested and broken on Windows + Android Chrome Version : 50.0.2661.102 OS Version: Windows 10.0, Android 5.1, Android 6.0 URLs (if applicable) : https://reddit.premii.com/scroll.htm What steps will reproduce the problem? Scroll with CSS Transform enabled Scroll with CSS Transform disabled Expected result: Smooth Scrolling in both cases. It should render same number of frames. Actual Result: Scroll with Transform enabled renders 60% less frames compare to Transform disabled Other browsers tested: Android 5.1 + chrome 49: Works as expected Android 6 + Chrome 44: works as expted iOS Safari: Works as exptcted Windows 10 UserAgentString: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36 Video: https://www.youtube.com/watch?v=smmabNSQUp8 See screenshot of chrome timeline. Timelines: (You guys should increase attachment size as each timeline is 23MB) https://t.co/v8DyfgvzV5 https://t.co/i7xrXacKPY https://t.co/GZZmmWpjFl
,
May 24 2016
I just stumbled across this by accident. I am not a Chrome engineer and am not sure if Chrome should behave differently here, but you are scrolling inside a div without, causing each of the <li> elements to get their own layer, making scrolling slow. If you set `will-change: transform` on your `div.page`, things should perform well.
,
May 24 2016
,
May 26 2016
Ian, do you know if taking too much time for painting would be the cause of this? It seems the green area (i.e. painting time) got the most increase in this case.
,
May 26 2016
,
May 26 2016
,
May 26 2016
FYI: OS is marked as windows, but scrolling performs really bad on Android mobile compare to windows.
,
May 26 2016
|
|||||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||||
Comment 1 by thestig@chromium.org
, May 24 2016