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.

Pella

1. The flickering resulted from "unattended" scroll action (short swipe gesture without moving your finger all the way to the end) even on Android. I guess throttling down scroll event handler can help in minimizing such effect. 2. I have no luck on making snap scrolling to work on iOS regardless to the the browser. Have you tried to remove the JS entirely and see if snap scrolling will work at all in iOS? The MDN states that snap scrolling after few tricks should work on any modern browser and there are many write ups out there in the public stating the same... But it never worked for me. – Kym

I have the same issue here. Did you find any workaround @thomaslindstr_m? – Uneven

@Kym The demo doesn't work for you? CSS Scroll Snap works well without JS side effects. – Pella

@JeanRegisser No. No resolution yet. I filed a bug on the Webkit bug tracker. – Pella

I'm doing a very similar thing, and I've noticed that the scrollLeft of my container goes back to zero every couple of scroll event hits – Trophoblast

I'm getting HORRIBLE flicker when HTML or BODY is the scroll container (y mandatory) on iOS 15, but it's fine when there's a DIV inside with a fixed height. A horizontal scroller (inside a div) is fine too. – Spend

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

Cutanddried

Answer 2

hey there this syntax can help you:-

<style>
#gallery {
scroll-snap-type: x mandatory;
overflow-x: scroll;
display: flex;
}

#gallery img {
scroll-snap-align: center;
}
</style>

<div id="gallery">
<img src="#">
<img src="#">
<img src="#">
</div>

css help

if (CSS.supports('scroll-snap-align: start')) {
// use css scroll snap
} else {
// use fallback
}

Thorathoracic

Sorry, this does not fix the bug. – Pella

Please write your answer correctly and explain how it works – Renferd