我的网站在 iOS webview 浏览器（safari、chrome 和 firefox）上似乎存在一些渲染问题。该问题仅出现在 iOS 设备上，无法在 pc、mac 或 android 设备上复制。
网站最初呈现完美。屏幕撕裂仅在页面多次重新加载后才会出现。复制它的另一种方法是锁定设备，等待几秒钟，然后打开设备，撕裂又回来了。
我尝试删除页面元素、动画和反应组件，但没有成功。查看 safari 中的 Web 开发人员工具，没有出现任何错误。
该网站正在使用 Gatsbyjs 构建，这是一个静态站点生成器，用于引导的 reactstrap 和用于字体的 fontawesome。页面上有一些动画 svg 元素，但删除它们无济于事。
我最初认为这是 react 中的某种内存泄漏，所以我删除了所有的 react 逻辑，问题仍然存在。
任何有助于调试问题的想法将不胜感激。
【问题讨论】：
标签： javascript ios css reactjs gatsby
在拔掉头发几个小时后发现了问题。
问题似乎在于在 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 中删除阴影后，问题就消失了。似乎找不到有关该问题的任何文档。箱形阴影可以正常工作，而投影则不行。我需要基于 alpha 的阴影过滤器来处理我正在使用的透明 png，但现在我已经在 iOS 上忽略了它，直到找到另一个解决方案。
【讨论】：
我在最近的一个项目中体验到了这一点。起初我以为是缺少clip-path 支持，因为我们在我们的项目中也使用了它，但不，它是filter: drop-shadow。
它真的很难重现，但通过足够的缩放、缩放和平移，它偶尔会出现。
我做了一个代码笔来演示这个问题：https://codepen.io/seanmaisch/full/BgZxbx
【讨论】：