[Webkit-unassigned] [Bug 214232] New: Element temporarily invisible when dynamically setting scroll-snap styles

Sun Jul 12 06:54:36 PDT 2020

https://bugs.webkit.org/show_bug.cgi?id=214232

            Bug ID: 214232
           Summary: Element temporarily invisible when dynamically setting
                    scroll-snap styles
           Product: WebKit
           Version: Safari 13
          Hardware: iPhone / iPad
                OS: iOS 13
            Status: NEW
          Severity: Minor
          Priority: P2
         Component: Compositing
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: nikita.gaidakov at gmail.com

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;
}
```

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20200712/8070050f/attachment-0001.htm>