New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 665223 link

Starred by 1 user

Issue metadata

Status: Duplicate
Merged: issue 646719
Owner: ----
Closed: Mar 2017
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Mac
Pri: 3
Type: Bug



Sign in to add a comment

ecma262 spec has horrible scrolling performance without will-change: transform

Project Member Reported by domenic@chromium.org, Nov 15 2016

Issue description

Version: 56.0.2919.0 canary (64-bit)
OS: Windows 10, Mac, Linux

What steps will reproduce the problem?

1. Navigate to https://tc39.github.io/ecma262/
2. Open devtools, and edit the #spec-container element (directly under body) by removing the `will-change: transform;` style
3. Scroll around, either using PageUp/PageDown, the mouse wheel, or the scrollbar

What is the expected result?

Scrolling should be buttery smooth, like it is in Firefox, Safari, and Edge (without will-change: transform).

What happens instead?

Scrolling is very laggy, with (on my beefy desktop) two 170-190 ms frames per pagedown keypress. The devtools timeline view says all this time is spent in "Update Layer Tree". I've attached a trace (not sure I did that right) and a devtools timeline export, taken in separate instances.

----

This cost the developer (bterlson, CC'ed) a few hours of debugging work. It was especially difficult since on his computer, the scrolling was smooth without the will-change: transform. We only reached that via him changing various things and then asking me to test.

All other browsers are able to handle this fine.

Some other interesting modifications you can make, after removing `will-change: transform`:

- Removing `position: absolute` + `overflow: hidden` on the body makes scrolling fast again (at the expense of messing up the page layout a bit)
- But then adding `height: 100vh` will make the page slow again.
 
trace_Mon_Nov_14_2016_7.13.34_PM.json.gz
816 KB Download
TimelineRawData-20161114T162615.json
16.1 MB Download
Status: Available (was: Untriaged)
Scrolling is slow without the will-change: transform because we repaint the page each time. Interestingly, if you do it for long enough it speeds up again, making me think that sub-sequence caching might be helping us a lot.

Compositing opaque scrollers doesn't help, because we're still slow on ToT.
Setting background: white on the #spec-container element will cause fast
composited scrolling at ToT, because now it's opaque. But this bug is really
about why the compositing update step ("update layer tree") is so slow here.
Looking..
It's paint invalidation that is so slow here.
The reason paint invalidation is slow is that in the slow-scrolling path, we
force paint invalidation for the scroller and all descendants. The way this is done
is to recurse into all of them and update their visual rects, then invalidate those
visual rects.

See:

https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/paint/PaintLayerScrollableArea.cpp?q=paintlayerscrollablearea.cpp&sq=package:chromium&dr&l=440

SPv2 is going to address this.
Just updating the repro URL: https://bterlson.github.io/ecma262/.
Mergedinto: 646719
Status: Duplicate (was: Available)
Labels: BugSource-Chromium PaintTeamTriaged-20161118 Hotlist-ThreadedRendering

Sign in to add a comment