以编程方式在子级上设置“样式"时，iOS上的CSS Scroll Snap视觉故障 [英] CSS Scroll Snap visual glitches on iOS when programmatically setting `style` on children

问题描述

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

上面的漂亮骨头示例.我想淡出滚动的孩子，但是启用CSS Scroll Snap时，它在我的iPhone iOS 12.0.1上开始出现严重毛刺.

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.

在此处观看视频: https://file-qacepzxlkb.now.sh/

在重新加载之前，我禁用了Scroll Snap(JavaScript仍在运行)，在重新加载之后，我启用了它.

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

这是JavaScript:

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摘录:

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

关于导致此问题的原因的任何想法，以及可能的解决方法?我意识到这可能需要破解，因为它可以在macOS的Chrome 70中完美运行.

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.

推荐答案

嘿，这种语法可以帮助您:-

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帮助

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

这篇关于以编程方式在子级上设置“样式"时，iOS上的CSS Scroll Snap视觉故障的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！