iOS Safari不会首次呈现整个页面

Posted 2021-05-02

我们有一个在所有浏览器和设备上都能很好地呈现的网站，除了第一次在Safari移动设备（或窄屏幕上的Safari Mac）中打开它。

网站：http://sheriff.org/

在iPhone Safari上重现：

1. 以私人模式打开网站
2. 刷新页面

在Safari for Mac上重现：

1. 以私人模式打开Safari
2. 将用户代理切换到ios - iPhone（开发>用户代理> Safari - iOS - iPhone）
3. 调整浏览器大小以获得移动设备宽度的近似值
4. 打开网站
5. 刷新页面

预期：页面应该第一次和第二次呈现相同

实际：在私人模式中第一次只显示绿色框第二次，页面完全呈现

结果：我试图比较两个页面（当它正确渲染时，以及渲染被破坏时），看看是否有任何差异，要发现在这两种情况下，页面都具有完全相同的html和CSS。

如果您检查第一次尝试时未显示的任何元素（在页面刷新后应该正确呈现），您将找不到任何影响元素可见性的样式（如opacity，display，visibility，position ,. ..等等）

更新：似乎Safari控制台Unhandled Promise Rejection: [object DOMError]中存在可能导致此问题的错误，我做了一项研究，发现它可能是由于页面上自动播放视频引起的（该页面确实有视频，但是视频播放即使抛出此错误），所以我认为应该有另一个原因，为什么抛出这个错误

关于我们为何在Safari上看到此类行为的任何建议都受到高度赞赏。

答案

您的网站充满了问题，正如其他一些评论员所指出的那样，一些问题是由于主页的大小荒谬导致某些网站资产在您希望它们被加载为某些大网站时无法加载外部脚本在你的css之前加载。有问题的css在“第二次”尝试加载的原因是因为css被缓存...最终（在加载几十个javascripts中的一个之后，你请求在你请求的几十个css文件之一之前）。 ..并将在后续加载时正确部署css（只要你确实允许有足够的时间和带宽来第一次加载页面）。

我想给你很多建议，但要保持与你的帖子相关：

1. 确保在页面开头的任何javascripts之前调用你的css。
2. 考虑消除大约90％的网站不必要的网站有用...因为在浏览您的网站之前，很少有人会耐心加载这么多数据...尤其是在相对较慢的移动浏览器上。
3. 查看Chrome控制台中的所有错误（在Google Chrome中右键单击您的页面并点击“检查”，然后查看“控制台”标签...您的网站有很多错误。如果您需要，您必须修复这些错误站点符合标准，更有可能被搜索引擎抓取。
4. 在Google Insight页面上查看您的网站：qazxsw poi

祝好运！