Anchor link in horizontal scroll container won't trigger scrolling if element is at least partially in view
Reported by
h...@jonjohnjohnson.com,
Dec 19
|
||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3642.0 Safari/537.36 Steps to reproduce the problem: 1. Go to https://vault.jonjohnjohnson.com/examples/scrolltabs/ 2. Open up devtools and remove `scroll-snap-type` declaration from ruleset of '.tabbed' selector. (Sorry don't have time to reduce case, but easily understandable without reduction) 3. Click tab 2. Click tab 1. See anchors exhibit scrolling to move either targeted panel into view. 4. Scroll horiztonally so that you are halfway between tabs/panels 1 and 2. 5. Now click tab 1 and tab 2 and notice how the browser will not align the targeted panels towards the scroll start edge of the scrollport. What is the expected behavior? Clicking anchors should always align targeted elements to corresponding scroll start edge in scrollport. Regardless of elements having been partially in view. What went wrong? Video of bug (without style alteration in devtools) http://cl.ly/330c24b7c063 Web compat issue. This works perfectly in firefox. Webkit also has this same unexpected/broken behavior. Did this work before? N/A Chrome version: 73.0.3642.0 Channel: dev OS Version: OS X 10.12.6 Flash Version: I'd thought this would have already been reported, but couldn't find an issue. Sorry if this is a dup. :/
,
Dec 20
,
Dec 20
This looks like an issue in Chrome's handling of ScrollIntoViewOptions. See: https://output.jsbin.com/lafedaj Clicking the link should cause the right edge of the red box to align with the right edge of the scroller but we seem to only handle this correctly for the block direction. sunyunjia@, mind taking a look?
,
Dec 20
,
Dec 21
Here's a link to a similar filing for webkit: https://bugs.webkit.org/show_bug.cgi?id=192862 They however always scroll to place the targeted element to match the top edge, even while still having same the horizontal (or inline, though I haven't checked if logical dimensions do relate) bug you guys have. Thanks for reducing a test case Bokan.
,
Dec 21
Actually bokan@chromium.org, there may be another issue exhibited in your test case. If you add scroll-behavior:smooth to the .container element, all of a sudden your scrollIntoView() method doesn't work at all. |
||||
►
Sign in to add a comment |
||||
Comment 1 by swarnasree.mukkala@chromium.org
, Dec 20