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

Question

为了填充整个页面的高度，我使用height: 100%;html和body标签，并且在关闭浏览器并重新打开之前，它可以正常工作。（由于移动设备上的问题，我不使用100vh https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in -some-mobile-browsers.html）

重现步骤：

• 在iPhone上的Google Chrome浏览器中打开https://angelika94.github.io/rick/（您会看到导航（Morty和Beer）位于页面底部）的CSS Rick屏幕截图
• 关闭浏览器并将其从多任务导航中删除：https : //support.apple.com/zh-cn/HT201330
• 再次打开浏览器（您将看到底部导航移离了“第一个屏幕”，现在您需要滚动才能看到它） css Rick的屏幕截图，没有导航

在以下情况下，页面将自行修复：

• 更新页面
• 将设备旋转到横向
• 通过标签打开和关闭浏览器的导航
• 关闭并重新打开浏览器，而无需在多任务导航中将其关闭

为什么会发生？如何解决此问题？

先感谢您！

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 毫秒后向页面添加一些文本（不可见），等等。但没有任何效果，因此我的永久动画整个页面的黑客。

就您而言，其他一些技巧可能会效果更好。本文概述了导致重绘/回流的所有各种情况，因此您可以尝试通过脚本执行其中一些操作。