CSS Scroll Snap visual glitches on iOS when programmatically setting `style` on children

Question

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.

Answer 1

What helped me was adding overflow: hidden; for each child element. In your case the code would like like this:

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