<https://codepen.io/thomaslindstr_m/pen/qJLbwa>

Pretty bare bones example above. **I want to fade out the child I scrolled away from**, but when CSS Scroll Snap is enabled, it starts glitching really bad on my iPhone iOS 12.0.1.

**See video here:** <https://file-qacepzxlkb.now.sh/>

Before the reload I disabled Scroll Snap (JavaScript still running), after the reload, I enable it.

Here's the JavaScript:

```
const windowWidth = window.innerWidth;

const viewsElement = document.querySelector('.views');
const firstViewContainer = viewsElement.querySelector('.container');

function scrollHandler(event) {
  const {scrollLeft} = viewsElement;
  const opacity = 1 - ((scrollLeft / windowWidth) / 1.5);

  firstViewContainer.style = `opacity:${opacity};`;
}

viewsElement.addEventListener('scroll', scrollHandler, {passive: true});

```

CSS excerpt:

```
.views {
  overflow: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;
}

.view { 
  /* NOTE remove to see that this issue is related to scroll snap */
  scroll-snap-align: start;
}

```

Any ideas on what is causing this issue, and possibly how to fix it? I realise this might require a hack, as it runs perfectly fine in Chrome 70 on macOS.