1588212016-06-15 17:08:12 -0700Scroll snapping not working for 2 elements2018-04-11 22:50:51 -0700111UnclassifiedWebKitLayout and RenderingSafari 9AllAllRESOLVEDFIXEDP1Critical---1sriramkrish85webkit-unassignedbfulghamdvoytenkofred.wangsimon.frasersriramkrish85timothy003wenson_hsieholdest_to_newest12027640sriramkrish852016-06-15 17:08:12 -0700When 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/zitifuy12181401sriramkrish852016-08-05 17:37:46 -0700Hi any updates on when this would be fixed?14011122334380fred.wang2018-02-21 08:26:40 -0800Created attachment 334380
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).14139313fred.wang2018-04-11 22:50:51 -0700According to AMP developers, this bug is fixed in iOS 11.33343802018-02-21 08:26:40 -08002018-02-21 08:26:40 -0800Testcasescroll-snapping.htmltext/html907fred.wangPCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHRpdGxlPlNjcm9sbCBTbmFwcGlu
ZzwvdGl0bGU+CiAgICA8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNl
LXdpZHRoIj4KICAgIDxtZXRhIGNoYXJzZXQ9InV0Zi04Ii8+CiAgICA8c3R5bGU+CiAgICAgIGRp
diB7CiAgICAgICAgd2lkdGg6IDIwMHB4OwogICAgICAgIGhlaWdodDogMjAwcHg7CiAgICAgIH0K
ICAgICAgI3Njcm9sbENvbnRhaW5lciB7CiAgICAgICAgb3ZlcmZsb3cteDogaGlkZGVuOwogICAg
ICAgIG92ZXJmbG93LXk6IGF1dG87CiAgICAgICAgLXdlYmtpdC1vdmVyZmxvdy1zY3JvbGxpbmc6
IHRvdWNoOwogICAgICAgIHNjcm9sbC1zbmFwLXR5cGU6IHkgbWFuZGF0b3J5OwogICAgICB9CiAg
ICAgIC5zY3JvbGxDb250ZW50IHsKICAgICAgICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQo
MTM1ZGVnLCByZWQsIGJsdWUpOwogICAgICAgIHNjcm9sbC1zbmFwLWFsaWduOiBub25lIHN0YXJ0
OwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgaWQ9InNj
cm9sbENvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9InNjcm9sbENvbnRlbnQiPjE8L2Rpdj4K
ICAgICAgPGRpdiBjbGFzcz0ic2Nyb2xsQ29udGVudCI+MjwvZGl2PgogICAgPC9kaXY+CiAgICA8
cD4KICAgICAgPGJ1dHRvbiBvbmNsaWNrPSJkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnc2Nyb2xs
Q29udGFpbmVyJykuc2Nyb2xsQnkoMCwgLTEwKSI+VXA8L2J1dHRvbj4KICAgICAgPGJ1dHRvbiBv
bmNsaWNrPSJkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnc2Nyb2xsQ29udGFpbmVyJykuc2Nyb2xs
QnkoMCwgMTApIj5Eb3duPC9idXR0b24+CiAgICA8L3A+CiAgPC9ib2R5Pgo8L2h0bWw+Cg==