'overflow-anchor' is ignored on inline elements
Reported by
inflexib...@gmail.com,
Jan 3
|
||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:66.0) Gecko/20100101 Firefox/66.0 Steps to reproduce the problem: 1. Scroll from top of the page slightly to trigger scroll anchoring 2. Click the button that says 'grow' What is the expected behavior? Scroll anchoring shouldn't apply and the text should be shifted downward by the expanding element. What went wrong? The 'overflow-anchor' property is ignored and the text node is selected as an anchor. 'overflow-anchor' is specified to apply to all elements. [1] The issue is in 'ScrollAnchor::Examine' as it will pass over inline elements before checking the 'overflow-anchor' property [2]. [1] https://drafts.csswg.org/css-scroll-anchoring-1/#exclusion-api [2] https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/layout/scroll_anchor.cc?l=271&rcl=ed72ba44d4631c98ff2ec7dd0f3cd3ca1edd1591 Did this work before? N/A Does this work in other browsers? Yes Chrome version: 71.0.3578.98 (Official Build) (64-bit) Channel: stable OS Version: OS X 10.14 Flash Version:
,
Jan 3
Reporter@ Thanks for the issue. Tested this issue on Mac OS 10.13.6 on the reported version 71.0.3578.98 and the latest Canary 73.0.3660.0 and unable to reproduce the issue by following the below steps. 1. Launched Chrome and opened to the given html page. 2. Clicked on the Grow Expander button and can observe that the text is shifted downward by the expanding element. Attached is the screen cast for reference. Request you to check and confirm if anything is missed from our end in triaging the issue. Also request you to retry the issue on a new chrome profile without any slags/extensions and update the thread with the observations. Thanks..
,
Jan 3
You need to scroll down from the top of the page before clicking the button, otherwise scroll anchoring won't be active. This is tricky on this test case because the text is so close to the top of the page. I've attached one with some more spacing, and a video demonstrating scroll anchoring happening when it shouldn't
,
Jan 3
It looks like perhaps the <body> element is selected as the anchor; if I add overflow-anchor to <body> it works as expected. My cursory reading of the spec indicates that this is likely WAI. skobes@, could you confirm?
,
Jan 7
Correct, the <body> element is selected in this case. It's weird that the body element's border box moves, but this is a quirk of the way margins work. If you adjust the height on #expander instead of the margin-bottom, then the scroll anchoring adjustments do not occur (as we would anchor to #expander).
,
Jan 7
Hmm, that is odd that the body element's border box moves. I didn't know about that. If you add a line of text in a <span> before the #expander, scroll it just out of view, and then click the button, that should work around the weird body element behavior. With that I'm still seeing scroll anchoring apply to the inline element with overflow-anchor: none. I've attached the slightly changed test case.
,
Jan 8
Oh... you're right, it's a bug.
,
Jan 8
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/9aa48df8be25fbe012dd1729b799b88fb25bacc6 commit 9aa48df8be25fbe012dd1729b799b88fb25bacc6 Author: Steve Kobes <skobes@chromium.org> Date: Tue Jan 08 17:03:40 2019 ScrollAnchor: Skip inline elements with overflow-anchor: none. An inline element can't be the anchor node, but the anchor selection algorithm was descending into it indiscriminately instead of checking the exclusion API first. Bug: 918756 Change-Id: Ie9b5e5fdea7f23de1af0b5215956151e9af15d3a Reviewed-on: https://chromium-review.googlesource.com/c/1400941 Reviewed-by: David Bokan <bokan@chromium.org> Commit-Queue: Steve Kobes <skobes@chromium.org> Cr-Commit-Position: refs/heads/master@{#620761} [modify] https://crrev.com/9aa48df8be25fbe012dd1729b799b88fb25bacc6/third_party/blink/renderer/core/layout/scroll_anchor.cc [add] https://crrev.com/9aa48df8be25fbe012dd1729b799b88fb25bacc6/third_party/blink/web_tests/external/wpt/css/css-scroll-anchoring/exclude-inline.html
,
Jan 8
Nice, and thanks for the test!
,
Jan 15
Verified in 73.0.3671.3 |
||||||
►
Sign in to add a comment |
||||||
Comment 1 by swarnasree.mukkala@chromium.org
, Jan 3