在iOS webview浏览器（safari，chrome和firefox）上，我的网站似乎存在一些渲染问题。该问题仅出现在iOS设备上，无法在PC，Mac或Android设备上复制。
该网站最初呈现完美。屏幕撕裂仅在几次重新加载页面后显示。复制它的另一种方法是锁定设备，等待几秒钟，然后打开设备并撕裂。
我尝试删除页面元素，动画和反应组件而没有运气。在safari中查看Web开发人员工具，不会出现任何错误。
该网站正在使用Gatsbyjs构建一个静态站点生成器，用于引导程序的反应器和用于字体的fontawesome。页面上有一些动画的svg元素，但是删除它们无助于解决问题。
我最初认为这是某种内存泄漏的反应，所以我删除了所有的反应逻辑，问题仍在继续。
非常感谢任何有助于调试问题的想法。
答案 0 :(得分：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上，直到找到另一个解决方案。
答案 1 :(得分：0)
我自己在最近的一个项目上经历过。起初我以为缺少clip-path支持，因为我们在项目中也使用了它，但是不，它是filter: drop-shadow。
确实很难复制，但是通过足够的缩放，缩放和平移，它偶尔会呈现出来。
我制作了一个Codepen演示了这个问题：https://codepen.io/seanmaisch/full/BgZxbx