为了填充页面的整个高度,我对 html 和 body 标签使用 height: 100%;
,
它工作正常,直到浏览器关闭并重新打开。
(由于移动设备上的问题,我不使用 100vh https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html)
重现步骤:
- 打开https://angelika94.github.io/rick/在 iPhone 上的 Google Chrome 中 (您将看到导航(莫蒂和啤酒)位于页面底部)screenshot of css Rick with navigation
- 关闭浏览器并将其从多任务导航中删除: https://support.apple.com/en-us/HT201330
- 再次打开浏览器(您将看到底部导航已移出“第一个屏幕”,现在您需要滚动才能看到它) screenshot of css Rick without navigation
在这些情况下页面将自行修复:
- 更新页面
- 将设备旋转至横向
- 通过选项卡打开和关闭浏览器导航
- 关闭并重新打开浏览器,而不在多任务导航中关闭它
为什么会发生这种情况?我该如何解决这个问题?
提前谢谢您!
最佳答案
我遇到了一个非常不同的问题,但我认为我制定的解决方案也可能适合您的情况,因为您提到更新页面可以修复它。
所以我在 Android 上使用 chrome 时遇到了问题,如果您滚动得非常快(在移动设备上并不罕见),某些元素将无法重新/绘制。到处搜索解决方案,但找不到任何可行的方法。
最后,我找到了一个可行的解决方案:
.pagewrap {
transform: translateZ(0);
animation-name: 'repaint';
animation-duration: 3s;
animation-iteration-count: infinite;
animation-play-state: running;
animation-timing-function: linear;
}
@keyframes repaint {from { zoom: 99.99999%; } to { zoom: 99.99998%; }}
因此,这会强制页面以 3 秒为周期不断重绘。
也许我应该将其调整为每 2 秒仅移动一小部分,而不是连续移动:
.pagewrap {
transform: translateZ(0);
animation-name: 'repaint';
animation-duration: 2s;
animation-iteration-count: infinite;
animation-play-state: running;
animation-timing-function: linear;
}
@keyframes repaint {
0% {
zoom: 99.99999%;
}
99% {
zoom: 99.99999%;
}
100% {
zoom: 99.99998%;
}
}
我尝试将 zoom: 99.99999;
更改为 1
,但在某些悬停效果上将比例转变为高于 1 的某些元素会显示缩放呼吸。所以 99.99999 到 99.99998 对我来说是使效果不可见的有效方法。
有点老套的解决方案,可能会在很长的页面上出现性能问题,但也许不会,因为浏览器应该只渲染屏幕上的内容。我使用它的页面图形化程度很高,有很多复杂的多层效果,这似乎不会对性能产生明显的影响。
似乎许多移动浏览器都过度优化了渲染,这导致了奇怪的失败,而且几乎没有详细记录的修复程序。强制重新绘制是我发现的唯一可行的修复方法。
我尝试了其他稍微不那么激进、记录在案的强制重绘方法。比如在滚动停止 200 毫秒后向页面添加一些文本(不可见),等等。但没有任何效果,因此我的“永久动画整个页面”黑客。
就您的情况而言,其他一些技巧可能会效果更好。这个article概述导致重绘/回流的所有各种事情,以便您可以尝试通过脚本执行其中一些操作。
关于html - iOS Chrome 计算出错误的文档高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58935402/