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

Question

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

网站：http://sheriff.org/

在iPhone Safari上重现：

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

在Safari for Mac上重现：

1. 以私密模式打开Safari
2. 将用户代理切换到iOS - iPhone（开发＆gt;用户代理＆gt; Safari - iOS - iPhone）
3. 调整浏览器大小以使其具有移动设备宽度的近似值
4. 打开网站
5. 刷新页面

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



实际： 在私人模式下，第一次只能看到一个绿色框 第二次，页面完全呈现



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

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

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

我们非常感谢您对我们在Safari上看到此类行为的建议。

Answer 1

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

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

1. 确保在您页面的任何一个javascripts之前调用您的CSS。
2. 考虑删除大约90％的网站不需要的网站，因为很少有人会在浏览您的网站之前耐心加载这么多数据...尤其是在相对较慢的移动浏览器上。
3. 查看Chrome控制台中的所有错误（在Google Chrome中右键单击您的页面，然后点击＆＃34;检查＆＃34;，然后查看＆＃34;控制台＆＃34;标签...您的网站有很多错误。如果您希望您的网站符合标准且更有可能被搜索引擎抓取，您必须修复这些错误。
4. 在Google的Insight页面上查看您的网站：https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.sheriff.org%2FPages%2FHome.aspx
祝你好运！