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 I 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 Does this work in other browsers? Yes, firefox. Blink also has this same unexpected/broken behavior. I'd thought this would have already been reported, but couldn't find an issue. Sorry if this is a dup. :/ Same filing against blink https://bugs.chromium.org/p/chromium/issues/detail?id=916631
<rdar://problem/46887211>
bokan@chromium.org did the due diligence of reducing this test case for the sister issue in blink: https://output.jsbin.com/lafedaj Though notice, there is still a compat issue in that blink only scrolls so targeted element scrolls up to meet the bottom edge. While webkit scrolls it all the way to meet the top edge. Firefox seems to have the most ironclad behavior, scrolling targeted element in to meet the nearest edges in each axis, which is what I'm guessing blink will resolve on matching.
*** This bug has been marked as a duplicate of bug 42593 ***