Javascript iOS浏览器上Webkit中的网站渲染撕裂问题

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

该网站最初呈现完美。只有在多次重新加载页面后才会显示屏幕撕裂。另一种复制的方法是锁定设备，等待几秒钟，然后打开设备，撕裂又回来了

我尝试过删除页面元素、动画和react组件，但没有成功。查看safari中的web开发人员工具，不会出现错误

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

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

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

---

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

问题似乎在于如何在css中使用filter: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中移除阴影后，问题就消失了。似乎找不到关于这个问题的任何文档。长方体阴影可以正常工作，而放置阴影则不行。对于我正在使用的透明png，我需要使用基于alpha的阴影过滤器，但目前我在iOS上没有使用它，直到我能找到另一个解决方案。

在最近的一个项目中亲身体验到这一点。起初我认为这是因为缺少

clip path

支持，因为我们在项目中也使用了它，但是没有，它是

filter:drop shadow

它真的很难复制，但有足够的缩放、缩放和平移，它偶尔会出现

我做了一个代码笔来演示这个问题：