Position sticky aligns incorrectly when inside a position fixed container
Reported by
mares...@gmail.com,
May 3 2017
|
||||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36 Steps to reproduce the problem: 1. Have a fixed container with a ul inside. The `ul` needs to have overflow: scroll and enough content in it to scroll so position sticky can work. Then, add a sticky element or two within the `ul` content. 2. Add left and top positioning to the fixed container. 3. Scroll. You can see a reproducible test case here: http://codepen.io/MichaelArestad/pen/aWyLMJ What is the expected behavior? The sticky element should position itself relative to its parents similarly to its sibling elements inside the container. What went wrong? The sticky elements are positioned outside of the fixed element to what looks like the outermost frame (not body or html). Did this work before? N/A Does this work in other browsers? Yes Chrome version: 57.0.2987.133 Channel: stable OS Version: OS X 10.12.4 Flash Version:
,
May 10 2017
,
May 11 2017
Thank you for providing more feedback. Adding requester "sashab@chromium.org" to the cc list and removing "Needs-Feedback" label. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
May 12 2017
,
May 12 2017
Tested the issue on Latest Stable# 58.0.3029.110 on Mac OS X 10.12.4 and could not reproduce the issue. Could you please re-check on latest stable and provide us an update. Note: Issue is not observed on Windows and Linux also. Thanks in Advance.
,
May 12 2017
It is still broken for me on latest stable for me (58.0.3029.110) on Mac OS 10.12.4. I checked a few things like zoom levels just in case. Still busted for me.
,
May 12 2017
Thank you for providing more feedback. Adding requester "msrchandra@chromium.org" to the cc list and removing "Needs-Feedback" label. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
May 15 2017
Can repro this issue on Mac Sierra using Stable (58) however cannot reproduce it on Canary. Stable: 58.0.3029.110 (Official Build) (64-bit) Canary: 60.0.3096.0 (Official Build) canary (64-bit) Test team, could you PTAL?
,
May 15 2017
Tested the issue on Latest Stable# 58.0.3029.110 (64 - bit) on Mac OS X 10.12.4 Sierra and could not reproduce the issue. @marestad -- Could you please let us know if there are any specific flags enable to reproduce the issue. Thanks in Advance.
,
May 15 2017
Able to reproduce the issue on MacBook Pro (Retina, Mid 2012) with chrome Stable #58.0.3029.110, Beta #59.0.3071.47 but not on Dev #60.0.3095.5, Canary #60.0.3100.0 Issue is fixed in M-60. Bisect Info: =========== Good build : 60.0.3091.0 , Revision Range - 469814 Bad build : 60.0.3090.0 , Revision Range - 469538 After executing the old bisect script in reverse, i got the following CL's between good and bad build versions =========================================== https://chromium.googlesource.com/chromium/src/+log/620e181dec3897ea1abd40e0572a58f97fa65936..a0999d137da9a33466efe47bc63f378000998ab1 The Fixed Change Log is : ------------------------------ https://chromium.googlesource.com/chromium/src/+/9b503962a017a8d69adfdae9300684c299922640 Review-Url: https://codereview.chromium.org/2839263002 Note: ----- Issue is not reproducible on Windows 10 and Ubuntu 14.04 smcgruer@- Could you please look into this issue, if it's related to your change, could you please merge it to the coming beta. If not could you please help us to reassign this issue to the right owner.
,
May 15 2017
My change is related, but only hides this particular instance of the problem rather than fix the whole thing. As long as the fixed position element and the scroller get composited, things break - see http://output.jsbin.com/papahe/quiet for an example that will reproduce after my change (and also on either low or high DPI). I suspect this is a duplicate of issue 695729 , assigning to yigu to confirm.
,
May 15 2017
,
May 15 2017
It's not a duplicate but I will take a look.
,
Jun 8 2017
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/65784430dea11bf2e12e947c77dd08ce2c543c6f commit 65784430dea11bf2e12e947c77dd08ce2c543c6f Author: yigu <yigu@chromium.org> Date: Thu Jun 08 04:09:05 2017 Unify the calculation of main thread offset of sticky element Currently we have different logic of calculating sticky postion offset on blink and cc which caused many unexpected offset related bugs. The usage of "source_to_parent" when updating sticky position offset on cc side makes the debug even harder. In addition we have to use another variable from transform node "source_offset" to make it work correctly which makes the logic even more complex. By passing main thread offset from blink to cc via Layer, we could unify the logic on both sides and get rid of the dependencies of those two variables from transform node. BUG= 718188 TEST=compositing/overflow/ancestor-overflow-layer-of-sticky-child-of-compositing-container.html; CompositedLayerMappingTest.StickyPositionMainThreadOffset CQ_INCLUDE_TRYBOTS=master.tryserver.blink:linux_trusty_blink_rel;master.tryserver.chromium.linux:linux_layout_tests_slimming_paint_v2 Review-Url: https://codereview.chromium.org/2911463002 Cr-Commit-Position: refs/heads/master@{#477881} [modify] https://crrev.com/65784430dea11bf2e12e947c77dd08ce2c543c6f/cc/blink/web_layer_impl.cc [modify] https://crrev.com/65784430dea11bf2e12e947c77dd08ce2c543c6f/cc/blink/web_layer_impl.h [modify] https://crrev.com/65784430dea11bf2e12e947c77dd08ce2c543c6f/cc/layers/layer.cc [modify] https://crrev.com/65784430dea11bf2e12e947c77dd08ce2c543c6f/cc/layers/layer.h [modify] https://crrev.com/65784430dea11bf2e12e947c77dd08ce2c543c6f/cc/layers/layer_impl_test_properties.h [modify] https://crrev.com/65784430dea11bf2e12e947c77dd08ce2c543c6f/cc/layers/layer_sticky_position_constraint.cc [modify] https://crrev.com/65784430dea11bf2e12e947c77dd08ce2c543c6f/cc/layers/layer_sticky_position_constraint.h [modify] https://crrev.com/65784430dea11bf2e12e947c77dd08ce2c543c6f/cc/trees/layer_tree_host_common_unittest.cc [modify] https://crrev.com/65784430dea11bf2e12e947c77dd08ce2c543c6f/cc/trees/property_tree.cc [modify] https://crrev.com/65784430dea11bf2e12e947c77dd08ce2c543c6f/cc/trees/property_tree.h [modify] https://crrev.com/65784430dea11bf2e12e947c77dd08ce2c543c6f/cc/trees/property_tree_builder.cc [modify] https://crrev.com/65784430dea11bf2e12e947c77dd08ce2c543c6f/cc/trees/transform_node.h [add] https://crrev.com/65784430dea11bf2e12e947c77dd08ce2c543c6f/third_party/WebKit/LayoutTests/compositing/overflow/ancestor-overflow-layer-of-sticky-child-of-compositing-container-expected.html [add] https://crrev.com/65784430dea11bf2e12e947c77dd08ce2c543c6f/third_party/WebKit/LayoutTests/compositing/overflow/ancestor-overflow-layer-of-sticky-child-of-compositing-container.html [modify] https://crrev.com/65784430dea11bf2e12e947c77dd08ce2c543c6f/third_party/WebKit/Source/core/layout/compositing/CompositedLayerMapping.cpp [modify] https://crrev.com/65784430dea11bf2e12e947c77dd08ce2c543c6f/third_party/WebKit/Source/core/layout/compositing/CompositedLayerMapping.h [modify] https://crrev.com/65784430dea11bf2e12e947c77dd08ce2c543c6f/third_party/WebKit/Source/core/layout/compositing/CompositedLayerMappingTest.cpp [modify] https://crrev.com/65784430dea11bf2e12e947c77dd08ce2c543c6f/third_party/WebKit/Source/core/page/scrolling/StickyPositionScrollingConstraints.cpp [modify] https://crrev.com/65784430dea11bf2e12e947c77dd08ce2c543c6f/third_party/WebKit/Source/core/page/scrolling/StickyPositionScrollingConstraints.h [modify] https://crrev.com/65784430dea11bf2e12e947c77dd08ce2c543c6f/third_party/WebKit/Source/core/paint/PaintLayerScrollableArea.h [modify] https://crrev.com/65784430dea11bf2e12e947c77dd08ce2c543c6f/third_party/WebKit/Source/platform/graphics/GraphicsLayer.cpp [modify] https://crrev.com/65784430dea11bf2e12e947c77dd08ce2c543c6f/third_party/WebKit/Source/platform/graphics/GraphicsLayer.h [modify] https://crrev.com/65784430dea11bf2e12e947c77dd08ce2c543c6f/third_party/WebKit/Source/web/tests/ScrollingCoordinatorTest.cpp [modify] https://crrev.com/65784430dea11bf2e12e947c77dd08ce2c543c6f/third_party/WebKit/public/platform/WebLayer.h [modify] https://crrev.com/65784430dea11bf2e12e947c77dd08ce2c543c6f/third_party/WebKit/public/platform/WebLayerStickyPositionConstraint.h
,
Jun 8 2017
|
||||||||||||
►
Sign in to add a comment |
||||||||||||
Comment 1 by sashab@chromium.org
, May 5 2017