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

为了填充整个页面的高度，我使用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的屏幕快照，不带导航

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

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

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

先感谢您！

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

所以我在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对我来说是使效果不可见的原因。

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

好像许多移动浏览器的渲染效果都过分优化，这导致很少的有据可查的修复程序导致古怪的失败。强制重涂是我发现的唯一可行的解​​决方案。

我尝试了其他一些不太激进的有记录的强迫重涂方法。就像在滚动停止200ms之后向页面中添加一些文本（不可见）等。但是什么都没用，因此我的动画整个页面永远都被破解了。

就您而言，其他一些黑客可能会更好地工作。此文章大纲所有的各种事情，原因重绘/回流，所以你可以尝试通过脚本做一些事情。