在iOS浏览器上使用网站渲染撕裂Webkit的问题

Question

在iOS webview浏览器（safari，chrome和firefox）上，我的网站似乎存在一些渲染问题。 该问题仅出现在iOS设备上，无法在PC，Mac或Android设备上复制。

该网站最初呈现完美。 屏幕撕裂仅在几次重新加载页面后显示。 复制它的另一种方法是锁定设备，等待几秒钟，然后打开设备并且撕裂已经回来。

我试过删除页面元素，动画和反应组件没有运气。 在safari中查看Web开发人员工具，不会出现任何错误。

该网站正在使用Gatsbyjs构建一个静态站点生成器，用于引导程序的reactstrap和用于字体的fontawesome。 页面上有一些动画svg元素，但删除它们无助于解决问题。

我最初认为这是某种内存泄漏的反应，所以我删除了所有的反应逻辑，问题仍在继续。

任何有助于调试问题的想法都将不胜感激。

屏幕撕裂在网页渲染上的屏幕截图

Answer 1

在拔出我的头发几小时后发现了这个问题。

问题似乎是利用过滤器：css中的drop-shadow。

.shadowed-alpha {
  -webkit-filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.22));
  filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.22));
}

从我的div中删除了阴影后，问题就消失了。 似乎无法找到有关该问题的任何文档。 盒阴影工作正常，阴影不会。 我需要基于alpha的阴影滤镜来处理我正在使用的透明png，但是现在我已经把它留在了iOS上，直到我找到了另一个解决方案。

Answer 2

在最近的一个项目中亲自体验这一点。 起初我认为缺少clip-path支持，因为我们在我们的项目中也使用它，但是不，它是filter: drop-shadow 。

它很难重现，但有足够的缩放，缩放和平移，它偶尔会出现。

我做了一个codepen演示了这个问题： https ：//codepen.io/seanmaisch/full/BgZxbx