我们有一个在所有浏览器和设备上都能很好地呈现的网站,除了第一次在Safari移动设备(或窄屏幕上的Safari Mac)中打开它。
在iPhone Safari上重现:
在Safari for Mac上重现:
预期:页面应该第一次和第二次呈现相同
实际:在私人模式中第一次只显示绿色框第二次,页面完全呈现
结果:我试图比较两个页面(当它正确渲染时,以及渲染被破坏时),看看是否有任何差异,要发现在这两种情况下,页面都具有完全相同的HTML和CSS。
如果您检查第一次尝试时未显示的任何元素(在页面刷新后应该正确呈现),您将找不到任何影响元素可见性的样式(如opacity
,display
,visibility
,position
,. ..等等)
更新:似乎Safari控制台Unhandled Promise Rejection: [object DOMError]
中存在可能导致此问题的错误,我做了一项研究,发现它可能是由于页面上自动播放视频引起的(该页面确实有视频,但是视频播放即使抛出此错误),所以我认为应该有另一个原因,为什么抛出这个错误
关于我们为何在Safari上看到此类行为的任何建议都受到高度赞赏。
您的网站充满了问题,正如其他一些评论员所指出的那样,一些问题是由于主页的大小荒谬导致某些网站资产在您希望它们被加载为某些大网站时无法加载外部脚本在你的css之前加载。有问题的css在“第二次”尝试加载的原因是因为css被缓存...最终(在加载几十个javascripts中的一个之后,你请求在你请求的几十个css文件之一之前)。 ..并将在后续加载时正确部署css(只要你确实允许有足够的时间和带宽来第一次加载页面)。
我想给你很多建议,但要保持与你的帖子相关:
祝好运!