我的网站在 iOS webview 浏览器(safari、chrome 和 firefox)上似乎存在一些呈现问题。该问题仅出现在 iOS 设备上,无法在 pc、mac 或 android 设备上复制。
网站最初呈现完美。屏幕撕裂只有在页面重新加载几次后才会出现。复制它的另一种方法是锁定设备,等待几秒钟,然后打开设备,撕裂又回来了。
我曾尝试删除页面元素、动画和 React 组件,但没有成功。查看 safari 中的网络开发人员工具,没有出现任何错误。
该网站正在使用静态站点生成器 Gatsbyjs 构建,reactstrap 用于 Bootstrap ,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 上将其排除在外,直到找到另一个解决方案。
关于javascript - iOS 浏览器上 Webkit 中的网站渲染撕裂问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48858605/