Fixed inside of transform: translate3d lags behind (rendering)
Reported by
aristide...@gmail.com,
Jan 30 2017
|
||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36 Example URL: http://fixed-transform3d.surge.sh/ Steps to reproduce the problem: 1. http://fixed-transform3d.surge.sh/ OR 2. https://jsbin.com/vexeriberi/edit?html,css,output 3. Open one of the sites above 4. Toggle the sidebar using one of the buttons. What is the expected behavior? The position:fixed square should animate with the translate3d container. What went wrong? It lags behind intermittently. It only happens if a specific set of css rules are present. I tried to narrow them down in the JS Fiddle. The bug is more visible in the first link. Does it occur on multiple sites: Yes Is it a problem with a plugin? No Did this work before? N/A Does this work in other browsers? Yes Chrome version: 55.0.2883.95 Channel: stable OS Version: OS X 10.11.6 Flash Version: Shockwave Flash 24.0 r0 Tested on Linux Ubuntu and it also affected.
,
Jan 30 2017
,
Jan 31 2017
,
Jan 31 2017
https://jsbin.com/vexeriberi/edit?html,css,output Lag confirmed when running Linux, both 56 and nightly.
,
Feb 1 2017
Using the has bisect providing the bisect results, Good Build : 49.0.2583.0 (revision : 363342) Bad Build : 49.0.2584.0 (revision : 363378) You are probably looking for a change made after 363372 (known good), but no later than 363373 (first known bad). CHANGELOG URL: https://chromium.googlesource.com/chromium/src/+log/b8e6a42d49ec47adc219ef8fb57db64ea88bb4c9..b6adea99ac09da288ebfa137466727c306bfb9fa From the CL above, assigning the issue to the concern owner @ajuma - Could you please check whether this is caused with respect to your change, if not please help us in assigning it to the right owner. Review URL: https://codereview.chromium.org/1495983003 Thanks!
,
Feb 6 2017
The problem is that the wrong cc::Layer is getting set as the fixed-pos container. We have: ...C->L->F... where L is the layer with the transform animation, C is its ancestor clipping layer, and F is the fixed position layer. CompositedLayerMapping::registerScrollingLayers sets the childForSuperlayers (rather than m_graphicsLayer) as the container for fixed pos when the owning PaintLayer can contain fixed position objects, so C rather than L is set as a fixed pos container (via cc::Layer::SetIsContainerForFixedPositionLayers). So when property trees get built, the transform tree has F's transform node as a child of C's transform node, which means it isn't affected by the transform animation on L. Looking through the history a bit, it's still not clear why we aren't just setting m_graphicsLayer as the fixed position container. It's plausible that this was triggered by the CL from #5 (which enabled compositor property trees) since CDP implemented fixed pos differently (by reverse-scrolling the accumulated scroll offset between a layer and its fixed pos container).
,
Feb 9 2017
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/d290cbee660c449245346abe4a9f2c7948df4c9e commit d290cbee660c449245346abe4a9f2c7948df4c9e Author: ajuma <ajuma@chromium.org> Date: Thu Feb 09 22:54:07 2017 Set m_graphicsLayer as fixed position container This changes the fixed position container set by CompositedLayerMapping from childForSuperlayers() to m_graphicsLayer. When childForSuperlayers() is different from m_graphicsLayer, setting the fixed position container to childForSuperlayers() means that the contained fixed position layers incorrectly ignore changes to m_graphicsLayer's transform that happen on the compositor thread (since they're fixed to m_graphicsLayer's parent rather than to m_graphicsLayer itself). BUG= 686748 CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:linux_layout_tests_slimming_paint_v2 Review-Url: https://codereview.chromium.org/2683433002 Cr-Commit-Position: refs/heads/master@{#449448} [modify] https://crrev.com/d290cbee660c449245346abe4a9f2c7948df4c9e/cc/layers/layer.cc [add] https://crrev.com/d290cbee660c449245346abe4a9f2c7948df4c9e/third_party/WebKit/LayoutTests/compositing/fixed-position-container-expected.html [add] https://crrev.com/d290cbee660c449245346abe4a9f2c7948df4c9e/third_party/WebKit/LayoutTests/compositing/fixed-position-container.html [modify] https://crrev.com/d290cbee660c449245346abe4a9f2c7948df4c9e/third_party/WebKit/Source/core/layout/compositing/CompositedLayerMapping.cpp
,
Feb 9 2017
,
Feb 10 2017
Thanks! How to know in which version will this be available?
,
Feb 10 2017
It will be in Chrome 58.
,
Feb 14 2017
Tested the issue on Windows-7, Mac 10.12.2 and Linux Ubuntu-14.04 using Chrome version 58.0.3012.0 as per the comment #0. Observed that the fix is working as expected. Attaching the screen cast for reference. Hence, adding the verified labels. Thanks. |
||||||||
►
Sign in to add a comment |
||||||||
Comment 1 by aristide...@gmail.com
, Jan 30 2017