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.
It looks like the issue might be related to the use of scroll-snap-type and scroll-snap-align in the CSS. These properties are used to define how the scroll snapping should behave, and it seems that on iOS, they can cause issues with smooth scrolling and animation.
One possible solution could be to remove the scroll-snap-type and scroll-snap-align properties from the .view class, and try using a different method for implementing the scrolling and snapping behavior in the website.
Alternatively, you could try using a different approach for fading out the child elements when they are scrolled away from, such as using the CSS transition property instead of directly modifying the element's opacity with JavaScript. This could help to avoid any potential issues with the scroll snapping behavior on iOS.
It's also worth noting that the scroll-snap-type and scroll-snap-align properties are relatively new, and as such, they might not be fully supported on all browsers and devices. If you need to support a wide range of browsers and devices, it might be worth considering using a different method for implementing the scrolling and snapping behavior in the website.