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

Question

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

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

我曾尝试删除页面元素、动画和 React 组件，但没有成功。查看 safari 中的网络开发人员工具，没有出现任何错误。

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

我最初以为是 React 中的某种内存泄漏，所以我删除了所有 React 逻辑，但问题仍然存在。

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

Screenshot of screen tearing on webpage render

Answer 1

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

问题似乎与在 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 上将其排除在外，直到找到另一个解决方案。