169800 2017-03-16 17:55:18 -0700 After a programmatic scroll in a scroll snap container, the scroll offset jumps to the last reached snap offset 2021-06-03 03:22:57 -0700 1 1 1 Unclassified WebKit CSS Safari Technology Preview iPhone / iPad Unspecified RESOLVED WORKSFORME InRadar P2 Blocker --- 1 malte wenson_hsieh jonlee mrobinson simon.fraser sriramkrish85 webkit-bug-importer wenson_hsieh oldest_to_newest 1288880 0 malte 2017-03-16 17:55:18 -0700 I'm sorry that we do not currently have a reduced repro case, but we thought you might want to know that CSS snap points are broken in Safari in current iOS 10.3 beta 2. More details here https://github.com/ampproject/amphtml/issues/7670 The bug has a few repro URLs. This affects a large subset of AMP pages (likely a few 100 million). We will revert to non-snap points behavior, but this will represent a signficiant regression in UX. 1288885 1 malte 2017-03-16 18:18:58 -0700 Updated to reflect that this is still broken in beta 6. 1288896 2 sriramkrish85 2017-03-16 18:47:24 -0700 Here is the URL to reproduce what Malte described below http://amphtml-nightly.herokuapp.com/test/manual/amp-slidescroll.amp.html Videos: Working slides on IOS 10.2- https://www.youtube.com/watch?v=DkI5U9Sqlm4 Broken slides on IOS 10.3 beta (test on beta 7) - https://www.youtube.com/watch?v=r6jZILTvt5E 1288929 3 simon.fraser 2017-03-16 21:41:08 -0700 The syntax changed to match the latest spec: https://drafts.csswg.org/css-scroll-snap-1/ 1288951 4 sriramkrish85 2017-03-16 23:36:39 -0700 @smfr - is there a date when this would come out of beta? 1289926 5 sriramkrish85 2017-03-21 18:20:14 -0700 Ok - Now i got clarity into what the real issue is. This is because of snap points This is not because of the syntax change , the old syntax still works fine on the beta. The only issue is when we set scrollLeft on the container via JS, the browser resets it back to the last known snap position set via css snapping. the right behavior would be to snap to the closest snap point. Here is my JS BIN http://jsbin.com/fiwiqo/61/edit?html,css,js,output And the video demonstrating what is wrong. https://youtu.be/r5P8d-k1Q1Y 1291151 6 sriramkrish85 2017-03-24 22:14:23 -0700 @Wenson Hsieh, any updates on this? will this be fixed before the beta launches? 1291177 7 wenson_hsieh 2017-03-25 01:49:58 -0700 (In reply to Sriram Krishnan from comment #6) > @Wenson Hsieh, any updates on this? will this be fixed before the beta > launches? Unfortunately, I cannot comment on what changes will make it into future releases. However, I will make it a priority to investigate and fix this problem on ToT. 1291179 8 wenson_hsieh 2017-03-25 02:08:22 -0700 <rdar://problem/31257989> 1294132 9 sriramkrish85 2017-04-04 13:17:01 -0700 Any update on when this would be fixed. As Malte mentioned it affects a few 100 million (AMP) pages, it would be great to get this fixed at the earliest possible! 1294151 10 jonlee 2017-04-04 13:56:19 -0700 Thanks. Unfortunately, we cannot discuss release dates, but understand that this is a very important bug for AMP. 1294659 11 306322 wenson_hsieh 2017-04-05 14:57:23 -0700 Created attachment 306322 Reduced test case adapted from <http://output.jsbin.com/fiwiqo> 1314378 12 sriramkrish85 2017-05-31 15:44:57 -0700 I believe this was solved in https://bugs.webkit.org/show_bug.cgi?id=170560 - can some one correct me if i am wrong? @Wenson Hsieh 1766339 13 mrobinson 2021-06-03 03:22:57 -0700 I can no longer reproduce this. I think it's fixed. 306322 2017-04-05 14:57:23 -0700 2017-04-05 14:57:23 -0700 Reduced test case adapted from <http://output.jsbin.com/fiwiqo> scroll-snap-fixed-div.html text/html 2721 wenson_hsieh PGhlYWQ+CiAgICA8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNlLXdp ZHRoLCBpbml0aWFsLXNjYWxlPTEiPgogICAgPHN0eWxlPgogICAgKiB7CiAgICAgICAgcGFkZGlu ZzogMDsKICAgICAgICBtYXJnaW46IDA7CiAgICAgICAgZm9udC1mYW1pbHk6IC1hcHBsZS1zeXN0 ZW07CiAgICB9CgogICAgI2NvbnRhaW5lciB7CiAgICAgICAgd2lkdGg6IDEwMHZ3OwogICAgICAg IGhlaWdodDogMzAwcHg7CiAgICAgICAgcG9zaXRpb246IGFic29sdXRlOwogICAgfQoKICAgICNj b250cm9scyB7CiAgICAgICAgdG9wOiAzMDBweDsKICAgICAgICB3aWR0aDogMTAwdnc7CiAgICAg ICAgaGVpZ2h0OiAxMDBweDsKICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgICB9CgogICAg I291dGVyIHsKICAgICAgICBib3gtc2l6aW5nOiBib3JkZXItYm94OwogICAgICAgIGRpc3BsYXk6 IGZsZXg7CiAgICAgICAgZmxleC13cmFwOiBub3dyYXA7CiAgICAgICAgd2lkdGg6IDEwMCU7IGhl aWdodDogMTAwJTsKICAgICAgICBsZWZ0OiAwOyB0b3A6IDA7CiAgICAgICAgb3ZlcmZsb3cteDog YXV0bzsgb3ZlcmZsb3cteTogaGlkZGVuOwogICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICAg ICAgICB3aGl0ZS1zcGFjZTogbm93cmFwOwoKICAgICAgICAtd2Via2l0LW92ZXJmbG93LXNjcm9s bGluZzogdG91Y2g7CiAgICAgICAgc2Nyb2xsLXNuYXAtdHlwZTogbWFuZGF0b3J5OwogICAgICAg IC13ZWJraXQtc2Nyb2xsLXNuYXAtdHlwZTogbWFuZGF0b3J5OwogICAgfQoKICAgIC5pbm5lciB7 CiAgICAgICAgZGlzcGxheTogZmxleDsKICAgICAgICBhbGlnbi1pdGVtczogY2VudGVyOwogICAg ICAgIGZsZXg6IDAgMCAxMDAlOwogICAgICAgIHdpZHRoOiAxMDAlOyBoZWlnaHQ6IDEwMCU7Cgog ICAgICAgIHNjcm9sbC1zbmFwLWFsaWduOiBzdGFydDsKICAgICAgICAtd2Via2l0LXNjcm9sbC1z bmFwLWNvb3JkaW5hdGU6IDAgMDsKICAgIH0KCiAgICAjZml4ZWQgewogICAgICAgIHBvc2l0aW9u OiBmaXhlZDsKICAgICAgICB0b3A6IDA7IHJpZ2h0OiAwOwogICAgICAgIHdpZHRoOiA1ZW07IGhl aWdodDogNWVtOwogICAgICAgIGJhY2tncm91bmQtY29sb3I6IHdoaXRlOwogICAgfQoKICAgIGEg ewogICAgICAgIHRleHQtZGVjb3JhdGlvbjogbm9uZTsKICAgICAgICBmb250LXNpemU6IDIwcHg7 CiAgICB9CiAgICA8L3N0eWxlPgo8L2hlYWQ+CjxkaXYgaWQ9ImNvbnRhaW5lciI+CiAgICA8ZGl2 IGlkPSJvdXRlciIgY2xhc3M9Im91dGVyIj4KICAgICAgICA8ZGl2IGlkPSJpbm5lcjEiIGNsYXNz PSJpbm5lciIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6IHJlZCI+PC9kaXY+CiAgICAgICAgPGRp diBpZD0iaW5uZXIyIiBjbGFzcz0iaW5uZXIiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiBncmVl biI+PC9kaXY+CiAgICAgICAgPGRpdiBpZD0iaW5uZXIzIiBjbGFzcz0iaW5uZXIiIHN0eWxlPSJi YWNrZ3JvdW5kLWNvbG9yOiBibHVlIj48L2Rpdj4KICAgIDwvZGl2Pgo8L2Rpdj4KPGRpdiBpZD0i Y29udHJvbHMiPgogICAgPGRpdj48cD5UbyByZXByb2R1Y2UgdGhlIGJ1ZywgZmlyc3QgdGFwIG9u ICdTY3JvbGwgdG8gdGhlIHJpZ2h0JyB1bnRpbCB0aGUgZ3JlZW4gYm94IGlzIG1vc3RseSBpbiB2 aWV3LjwvcD48L2Rpdj4KICAgIDxkaXY+PHA+VGhlbiwgdGFwICdUb2dnbGUgdGhlIGZpeGVkIGRp dicgdG8gc2hvdyBvciBoaWRlIHRoZSB3aGl0ZSBib3guPC9wPjwvZGl2PgogICAgPGRpdj48cD5P biBpT1MgMTAuMiwgdGhpcyB3b3VsZCBjYXVzZSB1cyB0byBzbmFwIHRvIHRoZSBncmVlbiBib3gu PC9wPjwvZGl2PgogICAgPGRpdj48cD5Ib3dldmVyLCBpbiAxMC4zLCB0aGlzIGp1bXBzIHVzIGJh Y2sgdG8gdGhlIHJlZCBib3guPC9wPjwvZGl2PgogICAgPGRpdiBzdHlsZT0ibWFyZ2luLXRvcDog MWVtOyI+CiAgICAgICAgPGEgaWQ9InNjcm9sbExlZnQiIGhyZWY9ImphdmFzY3JpcHQ6dm9pZCgw KSI+U2Nyb2xsIHRvIHRoZSBsZWZ0PC9hPgogICAgICAgIDxzcGFuIHN0eWxlPSJtYXJnaW46IDAg MWVtOyI+Jm5ic3A7PC9zcGFuPgogICAgICAgIDxhIGlkPSJ0b2dnbGVGaXhlZCIgaHJlZj0iamF2 YXNjcmlwdDp2b2lkKDApIj5Ub2dnbGUgdGhlIGZpeGVkIGRpdjwvYT4KICAgICAgICA8c3BhbiBz dHlsZT0ibWFyZ2luOiAwIDFlbTsiPiZuYnNwOzwvc3Bhbj4KICAgICAgICA8YSBpZD0ic2Nyb2xs UmlnaHQiIGhyZWY9ImphdmFzY3JpcHQ6dm9pZCgwKSI+U2Nyb2xsIHRvIHRoZSByaWdodDwvYT4K ICAgIDwvZGl2Pgo8L2Rpdj4KPGRpdiBpZD0iZml4ZWQiPjwvZGl2Pgo8c2NyaXB0Pgp0b2dnbGVG aXhlZC5hZGRFdmVudExpc3RlbmVyKCJjbGljayIsICgpID0+IHsKICAgIGlmIChmaXhlZC5zdHls ZS5kaXNwbGF5ID09PSAibm9uZSIpCiAgICAgICAgZml4ZWQuc3R5bGUuZGlzcGxheSA9ICJibG9j ayI7CiAgICBlbHNlCiAgICAgICAgZml4ZWQuc3R5bGUuZGlzcGxheSA9ICJub25lIjsKfSk7Cgpz Y3JvbGxSaWdodC5hZGRFdmVudExpc3RlbmVyKCJjbGljayIsICgpID0+IHsKICAgIHNldFRpbWVv dXQoKCkgPT4gb3V0ZXIuc2Nyb2xsTGVmdCArPSAxMDAsIDEwMCk7Cn0pOwoKc2Nyb2xsTGVmdC5h ZGRFdmVudExpc3RlbmVyKCJjbGljayIsICgpID0+IHsKICAgIHNldFRpbWVvdXQoKCkgPT4gb3V0 ZXIuc2Nyb2xsTGVmdCAtPSAxMDAsIDEwMCk7Cn0pOwo8L3NjcmlwdD4K