html - iOS Chrome 计算出错误的文档高度

Question

为了填充页面的整个高度，我对 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

在这些情况下页面将自行修复:

• 更新页面
• 将设备旋转至横向
• 通过选项卡打开和关闭浏览器导航
• 关闭并重新打开浏览器，而不在多任务导航中关闭它

为什么会发生这种情况？我该如何解决这个问题？

提前谢谢您!

Answer 1

我遇到了一个非常不同的问题，但我认为我制定的解决方案也可能适合您的情况，因为您提到更新页面可以修复它。

所以我在 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概述导致重绘/回流的所有各种事情，以便您可以尝试通过脚本执行其中一些操作。