Bug 158821 - Scroll snapping not working for 2 elements
Summary: Scroll snapping not working for 2 elements
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 9
Hardware: All All
: P1 Critical
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2016-06-15 17:08 PDT by Sriram Krishnan
Modified: 2018-04-11 22:50 PDT (History)
7 users (show)

See Also:

Attachments
Testcase (907 bytes, text/html)
2018-02-21 08:26 PST, Frédéric Wang (:fredw) 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Sriram Krishnan 2016-06-15 17:08:12 PDT 
When i try to use -webkit-scroll-snap-type: mandatory on a container and -webkit-scroll-snap-coordinate: 0 0 on its children, it does not work when there are only 2 elements in the container. 

Here is the URL for my demo  - http://output.jsbin.com/fegace

I found that i could work around this by adding 2 dummy 1px elements on either side of the actual elements and make this sort of work. 
Workaround - http://output.jsbin.com/zitifuy
Comment 1 Sriram Krishnan 2016-08-05 17:37:46 PDT 
Hi any updates on when this would be fixed?
Comment 2 Frédéric Wang (:fredw) 2018-02-21 08:26:40 PST 
Created attachment 334380 [details]
Testcase

This is a reduced testcase without -webkit prefix and using the new values described in the latest Working Draft (https://drafts.csswg.org/css-scroll-snap/). The snapping works as expected with the iOS simulator (both the latest release and trunk).
Comment 3 Frédéric Wang (:fredw) 2018-04-11 22:50:51 PDT 
According to AMP developers, this bug is fixed in iOS 11.3