New issue
Advanced search Search tips

Issue 872300 link

Starred by 1 user

Issue metadata

Status: WontFix
Owner:
Closed: Aug 16
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows , iOS , Mac
Pri: 1
Type: Bug



Sign in to add a comment

[css-scroll-snap] First example from the Scroll Snap spec doesn’t work

Reported by e...@cloudinary.com, Aug 8

Issue description

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

Steps to reproduce the problem:
1. Go to this URL: https://codepen.io/eeeps/pen/oMWGQW which is a copy/paste the first example, here https://www.w3.org/TR/css-scroll-snap-1/#example-96f584ce

What is the expected behavior?
Horizontal scrolling on the .photoGallery “snaps” to the center of the <img>s. (like I see here: https://snap.glitch.me/carousel.html)

What went wrong?
The CSS has no effect. Scrolling behaves the same with/without it, and nothing “snaps”.

Did this work before? No 

Does this work in other browsers? N/A

Chrome version: 70.0.3516.0  Channel: canary
OS Version: OS X 10.13.6
Flash Version:
 
Labels: Needs-Triage-M70
Components: -Blink>CSS Blink>Scroll
Cc: swarnasree.mukkala@chromium.org
Labels: Triaged-ET Needs-Feedback
Tried to reproduce the issue on reported chrome version #70.0.3516.0 by using Mac OS 10.13.6 following below steps.

Steps:
=====
1.Launch chrome.
2.Opened link https://codepen.io/eeeps/pen/oMWGQW
3.Tried scrolling horizontally and could observe no issue while scrolling.
 
Attached screencast for reference.
@Reporter: Could you please review the attached screen-cast and confirm if anything being missed here.
Also request you to provide a screencast for better understanding of the issue. 

Thanks.!
872300.mp4
1.2 MB View Download
The issue is that the following CSS in the demo has no effect:

img {
    scroll-snap-align: center none;
}
.photoGallery {
    scroll-snap-type: x mandatory;
}

That CSS is supposed to ensure that horizontal scrolls "snap" to the center of carousel items. Instead, this page behaves the same as it would without this CSS. See my attached screenshot, which compares the behavior of the problem page to another page which demos new scroll snap features, successfully.

Note that I have not been able to create a reduced test case to figure out why that demo works, but the spec example does not.
scroll_snap_not_working.mp4
3.0 MB View Download
Project Member

Comment 5 by sheriffbot@chromium.org, Aug 10

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
Labels: Target-70 M-70 FoundIn-70 OS-Windows
Status: Untriaged (was: Unconfirmed)
Able to reproduce the issue on Mac 10.13.3, Win-10 and Ubuntu 14.04 using chrome reported version #70.0.3516.0 and latest canary #70.0.3521.2. Issue is not applicable to OS-Linux. 
This is a non-regression issue as it is observed from M60 old builds. 

Hence, marking it as untriaged to get more inputs from dev team.

Thanks...!!

Comment 7 Deleted

Cc: -sunn...@chromium.org sunyunjia@chromium.org
Majid, Sandra could you take a look at this issue?
Labels: -Pri-2 -Target-70 -M-70 M-69 RegressedIn-69 Target-69 OS-iOS Pri-1
Owner: sunyunjia@chromium.org
Status: Assigned (was: Untriaged)
Thanks for spotting this, I'll take a look.
Components: -Blink>Input Blink>Scroll
Status: WontFix (was: Assigned)
The linked sample code code uses incorrect direction per current specification **. 

It should use
`scroll-snap-align: none center;`
instead of:
`scroll-snap-align: center none;`

The first item in that list is block direction (normally vertical), and second one is inline direction (normally horizontal).



** The change in the spec [1] is fairly recent so previous version of the spec has examples that
matches yours. Safari used to implement the old behavior but I have not checked. I suggest either
using a single value `scroll-snap-align: center`, or using longhand syntax scroll-snap-align-inline 
and scroll-snap-align-block to avoid the (hopefully temporary) interop issue.

[1] https://github.com/w3c/csswg-drafts/issues/2232
Thank you! The most recent Published Draft of the spec (still!) reflects the old order, but the Editor’s Draft has the new one -- I should have been looking there.

Sign in to add a comment