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

为了填充页面的整个高度，我使用

height:100%用于html和正文标记，
在浏览器关闭和重新打开之前，它工作正常。
（由于移动设备的问题，我不使用100vh）

复制步骤：


在iPhone上的Google Chrome中打开
（您将看到导航（Morty和Beer）位于页面底部）
关闭浏览器并将其从多任务导航中删除：

再次打开浏览器（您将看到底部导航从“第一个屏幕”移出，现在您需要滚动查看）


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


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

为什么会这样？如何修复此行为

提前谢谢你
 我有一个非常不同的问题，但我认为我制定的解决方案可能也适用于您的情况，因为您提到更新页面会解决它

所以我在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%;
  }
}

我试过缩放：99.99999

到

1

，但某些元素在某些悬停效果中缩放比例超过1时会显示缩放效果。所以99.99999到99.99998对我来说是让效果隐形的东西

有点老套的解决方案，可能会在很长的页面上出现性能问题，但可能不会，因为浏览器应该只呈现屏幕上的内容。我在上面使用的页面在图形上很重，有很多复杂的多层效果，这似乎没有明显的性能影响

似乎许多移动浏览器都过度优化了渲染，这导致了一些奇怪的故障，而且几乎没有记录在案的修复程序。强制重新绘制是我找到的唯一有效的修复方法

我尝试了其他稍微不那么激进的、有文件记录的强制重新绘制的方法。比如在滚动停止200毫秒后向页面添加一些文本（不可见），等等。但是什么都没用，所以我的动画永远是黑客

---

在您的情况下，其他一些黑客可能工作得更好。本文概述了所有导致重绘/回流的各种原因，因此您可以尝试通过脚本执行其中一些操作。

此处需要更多信息。你能发布一个代码示例吗？css/html标记的其余部分可能会导致这些问题，而不仅仅是高度和平台-在您的示例中，您可以将

.links

div更改为

位置：绝对值
。这会改变你看到的行为吗？（我没有iphone要测试）是您的代码示例@Rachel Gallen。另外，请尝试将手机旋转到横向模式，然后再旋转回来。会修好的。我认为这是Chrome的问题，而不是HTML/CSS的问题。它只出现在Chrome浏览器中，您必须向下滚动的数量是Chrome浏览器底部和顶部栏在组合它们时产生的确切像素数量。@slynagh不，不是这样的。