如何解决 Safari IOS 上反复出现的问题？

Question

我对 ios iphone 上的这个问题（一个问题反复出现错误消息）感到非常恼火。努力建立一个网站，但只有最近ios版本的iphone有这个问题。Chrome 会在 iPhone 上加载该网站，但同样的问题。这是一些ios效率问题。摆脱 css 变换和动画并不能解决我的问题。我的网站是在 adobe xd 上设计的，我使用 Web Export 导出它，并使用一些 javascript 来缩放它以适应任何显示尺寸。我不知道页面画板尺寸如何太大，例如宽度：3554px和高度：2346px。Windows 和 Android 上从来没有遇到过任何问题。最近的iPhone测试让我非常失望。即使涉及变换缩放，JavaScript 也不会导致这里的问题。我测试了网站的初始版本，其中 JavaScript 缩放没有引起任何问题。然后我清理了所有动画和 css 转换。但仍然是同样的问题。这是因为页面尺寸较大（例如宽度 3554px）...？Safari 无法处理这个问题吗...？请帮我解决它。我不希望来自 iPhone 的访问者对我的网站感到失望。我有一些文章页面使用 css 媒体查询，页面宽度比主页小 2358px。我没有 iPhone，但在朋友的 iPhone 上检查发现文章页面已加载，但主页未加载。有趣的是，我已经实现了这个功能，就像当您自动旋转网页时将转到完整的桌面站点一样。主页和文章页面都有同样的问题。但旧的ios版本没有出现这个问题。如果您有 iPhone，请检查链接，了解其背后的原因。预先感谢大家...需要帮助...

\n

主页\n https://elomymelo.com/index.html

\n

文章页面\n https://elomymelo.com/jbl%20flip%206%20meaningful%20upgrade.html

\n

我没有 mac 书。因此，如果您的 mac 运行的是最新的操作系统和 safari，请检查它并让我知道 mac 操作系统上是否存在此问题...

\n

CSS

\n

#Web_1920__1 {\n    position: absolute;\n    width: 3554px;\n    height: 2346px;\n    border: 0px grey solid;\n    background-color: rgba(255,255,255,1);\n    overflow: visible;\n    --web-view-name: Web 1920 \xe2\x80\x93 1;\n    --web-view-id: Web_1920__1;\n    --web-scale-to-fit: true;\n    --web-scale-to-fit-type: width;\n    --web-scale-on-resize: true;\n    --web-center-horizontally: true;\n    --web-enable-deep-linking: true;\n}\n

\n

这些变量适用于 javascript，它们不会导致标题中提到的问题......

\n

Answer 1

我一直在调试我们的用户群报告的类似问题，这些用户在 iOS 15.4.1 / 15.5 上遇到 Safari 崩溃，并显示“问题重复发生”的错误消息

经过一番调查，我发现这些问题可能是由于 iOS/Safari 更新到 WebGL 2.0 / WebGL for Metal 以及 CSS@keyframes动画问题所致。

具体来说，关于我遇到的问题，如果应用了CSS动画的父元素中有一个应用了 CSS 规则的子元素，Safari 将在几秒钟后崩溃并显示此错误。opacity@keyframes

如果我从应用了 css 动画opacity的父元素中的子元素中删除了 CSS 样式规则@keyframes，或者如果我只是从父元素本身中删除了 css@keyframes动画样式规则，则可以解决问题并且不再发生崩溃。

此问题似乎不会影响iPadOS 15.4.1，仅影响iOS 15.4.1 或更高版本。

最新的 iOS / Safari 更新中肯定存在一些错误，我相信它们都与新的 WebGL 2.0 / WebGL for Metal 集成相关（根据我在此处和此处阅读的类似问题）

我还在Apple 支持论坛上报告了此问题，希望他们能在未来的更新中解决此问题。