CODEWITHSUNDEEP
javascriptioscssmobile-safariscroll-snap-points
thomaslindstr_m
thomaslindstr_m

Reputation: 190

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

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.

Upvotes: 19

Views: 3169

Answers (2)

Robert Raul
Robert Raul

Reputation: 46

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

Upvotes: 1

Suhas Sumukh
Suhas Sumukh

Reputation: 1

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
}

Upvotes: -5

Related Questions