Bug 214232

Summary: Element temporarily invisible when dynamically setting scroll-snap styles
Product: WebKit Reporter: Nikita Gaidakov <nikita.gaidakov>
Component: CompositingAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Minor CC: simon.fraser, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari 13   
Hardware: iPhone / iPad   
OS: iOS 13   
Attachments:
Description Flags
Test case
none
Screengrab none

Nikita Gaidakov
Reported 2020-07-12 06:54:36 PDT
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; } ```
Attachments
Test case (1.60 KB, text/html)
2020-07-15 09:24 PDT, Simon Fraser (smfr) 		no flags
Details
Screengrab (4.55 MB, video/mp4)
2020-07-15 09:43 PDT, Nikita Gaidakov 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2020-07-14 22:58:07 PDT
<rdar://problem/65586998>
Simon Fraser (smfr)
Comment 2 2020-07-15 09:24:24 PDT
Created attachment 404350 [details] Test case
Simon Fraser (smfr)
Comment 3 2020-07-15 09:26:41 PDT
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.
Nikita Gaidakov
Comment 4 2020-07-15 09:43:20 PDT
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.
Note You need to log in before you can comment on or make changes to this bug.