Question

我在iPad上遇到一个奇怪的问题，我在其中用mix-blend-mode: screen进行svg来像这样为文本着色：

CSS：

img {
  top: 0;
  right: 0;
  bottom: 0;
  width: 50vw;
  height: 100vh;
  position: fixed;
  mix-blend-mode: screen;
  z-index: 100;
}

#backing {
  background: white;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

HTML：

  <img src="https://upload.wikimedia.org/wikipedia/commons/2/25/Red.svg">
  <div id="backing"></div>
  <p>...content...</p>

在此处查看JSBIN：https://jsbin.com/kunofal

在加载时，一切看起来都很好，但是在滚动时，只要顶部镶边缩小，图像就会变得稳定：https://imgur.com/a/I62FrFX

奇怪的是，似乎只有打开多个选项卡时才会发生。在台式机或手机上似乎没有问题，只有我的10.5英寸iPad Pro，12.1.4（16D57）和仅在纵向模式下才有问题（这足以在横向模式下工作）。

根据有关其他混合混合模式错误的一些建议，我尝试不加transform: translateZ(0);。

这是错误还是我做错了什么？

带有“混合混合模式”的Safari iOS错误（尤其是在iPad Pro 10.5上）

0 个答案: