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/ （你会看到导航（莫蒂和啤酒）放在页面底部）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 对我有用，使效果不可见。

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

似乎许多移动浏览器都对渲染进行了过度优化，这会导致奇怪的故障，而几乎没有有据可查的修复。强制重绘是我发现的唯一可行的解​​决方法。

我尝试了其他稍微不那么激进的、记录在案的强制重绘方法。就像在滚动停止 200 毫秒后向页面添加一些文本（不可见），等等。但是没有任何效果，因此我的动画整个页面永远是 hack。

在您的情况下，其他一些技巧可能会更好。这个article 概述了导致重绘/重排的所有各种事情，因此您可以尝试通过脚本执行其中一些事情。

Answer 2

解决问题的简便方法：
首先，一个很小的 ​​js 代码*：

function defineVisibleHeight (){
      const h = window.innerHeight * 0.01;
      document. documentElement.style.setProperty('--vh', `${h}px`);
 }

 defineVisibleHeight();
 
 window. onresize = defineVisibleHeight; // not mandatory;

^{*代码示例有额外的空格以防止普通复制/粘贴}

使用前面的代码，我们找到了屏幕的真正可见区域并将其存储为样式表的变量；
最后，css：

.wrapper{
    height: calc(var(--vh, 1vh) * 100);
}