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

Question

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

复制步骤：

• 在iPhone的Google Chrome中打开https://angelika94.github.io/rick/（您会看到导航（Morty and Beer）位于页面底部）screenshot of css Rick with navigation
• 关闭浏览器，并将其从多任务导航中删除：https://support.apple.com/en-us/HT201330
• 再次打开浏览器（您将看到底部导航从“第一个屏幕”移开，现在您需要滚动才能看到它）screenshot of css Rick without navigation

在这种情况下，页面将自行固定：

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

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

谢谢您！

Answer 1

所以我在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之后向页面中添加一些文本（不可见）等。但是什么都没做，所以我的动画整个页面永远都被黑客入侵。
就您而言，其他一些黑客可能会更好地工作。 article概述了导致重绘/重熔的所有各种因素，因此您可以尝试通过脚本执行其中的一些事情。