I'm encountering a bug with iOS when using a container with scroll-snap. For certain events, I need to trigger an animated smooth scroll, and for this to work in most renderers, scroll-snap needs to be temporarily disabled. However, I found that on iOS, upon reapplying scroll-snap styles, certain elements will temporarily turn invisible – until I scroll in the container again. I'm guessing this is a compositing bug. The child elements have to have some level of complexity to reproduce the bug. I have narrowed down one simple example where child elements have an overflow auto: https://jsfiddle.net/7gr6htLf/ Swipe to slide 2 or 3, and click the 'Toggle scroll-snap' button. Interestingly, on slide 2 the disappearing happens when _removing_ the class, whereas on slide 3 it happens when _adding back_ the class. Contents of fiddle copied below. In the above I reproduced the bug by toggling `scroll-snap-align` on child elements. I believe the same happens if any other style is toggled that affects overall scroll-snap behaviour, eg. `scroll-snap-type`. I am testing on iPhone X with iOS 13.5.1 (17F80) ## Code ### HTML ``` <body> <button onclick="toggleSnappable()">Toggle scroll-snap</button> <div class="swipe snappable"> <div> <div class="text"> Slide 1 lorem ipsum dolor sit amet consectetur </div> </div> <div> <div class="text"> Slide 2 lorem ipsum dolor sit amet consectetur </div> </div> <div> <div class="text"> Slide 3 lorem ipsum dolor sit amet consectetur </div> </div> </div> </body> ``` ### JS ``` let snappable = true function toggleSnappable() { snappable = !snappable if (snappable) { document.querySelector('.swipe').classList.add('snappable') } else { document.querySelector('.swipe').classList.remove('snappable') } } ``` ### CSS ``` body { background-color: #5577aa; } .swipe { overflow: auto; width: 400px; display: flex; flex-flow: row nowrap; font-size: 60px; font-weight: bold; color: white; scroll-snap-type: x mandatory; scroll-snap-stop: always; } .swipe > * { flex: none; width: 100%; display: flex; flex-flow: row nowrap; } .snappable > * { scroll-snap-align: center; } .text { max-height: 3.5em; overflow-y: auto; } ```
<rdar://problem/65586998>
Created attachment 404350 [details] Test case
When toggling scroll snap I see the scroll position get reset to 0 (possibly a bug), but I don't see any disappearing elements with the attached testcase on iOS 13.4.
Created attachment 404351 [details] Screengrab I'm attaching a screengrab of attached Test Case viewed on Safari on iPhone X with iOS 13.5.4 You can see that on Slide 1, toggling scroll-snap has no untoward effect, on Slide 2, toggling it both off and on causes the slide to disappear, and on Slide 3 only toggling it back on causes the slide to disappear. Whenever the slide disappears, any sideways scroll action will make it reappear.