New issue
Advanced search Search tips

Issue 835301 link

Starred by 3 users

Issue metadata

Status: Assigned
Owner:
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug

Blocking:
issue 497851



Sign in to add a comment

[css-scroll-snap][position-sticky] scroll-snapping "stickily" positioned elements can cause inaccurate snap positions

Reported by h...@jonjohnjohnson.com, Apr 20 2018

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3399.0 Safari/537.36

Steps to reproduce the problem:
1. Go to testcase -> http://output.jsbin.com/qugurer/6
2. Scroll each row back and forth a few times
3. Resize your window if you haven't seen inaccurate snapping within the first handful of scroll attempts per row.
4. Noticed that if you end your scroll interaction without any inertia it is more likely to bug.

What is the expected behavior?
Snapping should only happen at the end of the scroll-snapped elements "normal flow" as designated by "scroll-snap-align: end" property declaration, even if they elements are also using "position:sticky" with valid box offset.

What went wrong?
After scrolling around a bit, the snap positions often become incorrect snapping at arbitrary points. If you remove "position: sticky" from the snapping elements, the bug disappears.

Did this work before? N/A 

Does this work in other browsers? N/A

Chrome version: 68.0.3399.0  Channel: n/a
OS Version: OS X 10.12.6
Flash Version: 

Seems to happen more easily when scroll containers snap positions are closer together, so in the testcase, rows  further down the document are easier to see buggy behavior.

Also, saw in csswg that majidvp@chromium.org is involved with the implementation, figured I'd loop him here.
 
Labels: Needs-Triage-M68
Labels: Needs-Feedback Triaged-ET
Tested the issue on chrome reported version 68.0.3399.0 using Mac 10.12.6 with steps mentioned below:
1) Launched chrome reported version and navigated to URL: http://output.jsbin.com/qugurer/6
2) scrolled each row back and forth, didn't observed any incorrect snapping while scrolling it
Observations: Also tested the issue by resizing the window, didn't observed any incorrect snapping while scrolling

@Reporter: Please find the attached screencast for your reference and provide your feedback o it which help in further triaging, if possible could you please provide screencast of the which helps us in better understanding.

Thanks!

835301.mp4
2.8 MB View Download
viswa.karala@chromium.org

Your video shows the bug, many times. Each time any row resolves a scrolling/snapping position not on the edge of the rows cells, it is snapping incorrectly. The first time it happens in your video is at 21 seconds in while scrolling the third row.

If you'd inspect the document, you'd see the corresponding scroll-snap styling which can guide your understanding.
Project Member

Comment 4 by sheriffbot@chromium.org, Apr 23 2018

Cc: viswa.karala@chromium.org
Labels: -Needs-Feedback
Thank you for providing more feedback. Adding the requester to the cc list.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

Comment 5 by bokan@chromium.org, Apr 26 2018

Owner: sunyunjia@chromium.org
Status: Assin (was: Unconfirmed)

Comment 6 by bokan@chromium.org, Apr 26 2018

Cc: bokan@chromium.org majidvp@chromium.org
Status: Assigned (was: assin)
Summary: [css-scroll-snap][position-sticky] scroll-snapping "stickily" positioned elements can cause inaccurate snap positions (was: [scroll-snap][position-sticky] scroll-snapping "stickily" positioned elements can cause inaccurate snap positions)
Blocking: 497851

Sign in to add a comment