Bug 214232

Summary:

Element temporarily invisible when dynamically setting scroll-snap styles

Product:

WebKit

Reporter:

Nikita Gaidakov <nikita.gaidakov>

Component:

Compositing

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Minor

CC:

simon.fraser, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

Safari 13

Hardware:

iPhone / iPad

OS:

iOS 13

Attachments:

Description	Flags
Test case	none
Screengrab	none

Description Nikita Gaidakov 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;
}
```

Comment 1 Radar WebKit Bug Importer 2020-07-14 22:58:07 PDT

<rdar://problem/65586998>

Comment 2 Simon Fraser (smfr) 2020-07-15 09:24:24 PDT

Created attachment 404350 [details]
Test case

Comment 3 Simon Fraser (smfr) 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.

Comment 4 Nikita Gaidakov 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.