[css-scroll-snap] First example from the Scroll Snap spec doesn’t work
Reported by
e...@cloudinary.com,
Aug 8
|
||||||||
Issue descriptionUserAgent: 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:
,
Aug 9
,
Aug 10
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.!
,
Aug 10
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.
,
Aug 10
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
,
Aug 14
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...!!
,
Aug 16
Majid, Sandra could you take a look at this issue?
,
Aug 16
Thanks for spotting this, I'll take a look.
,
Aug 16
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
,
Sep 11
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 |
||||||||
Comment 1 by viswa.karala@chromium.org
, Aug 8