html - 具有相对高度的元素在滚动时改变高度/跳跃(移动)

Question

如下图所示，.hero div 的高度在滚动经过某个点时发生变化(Chrome、Android 6.0.1)。

这是相关的CSS

.hero {
    height: 100%;
    width: 100%;
    padding: .1px;
    overflow: hidden;
    position: relative;
}

该图像是一个 svg:

svg {
    height: 100px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;

我以前遇到过这个问题，在使用视口(viewport)单位设置高度时更常见。这在桌面浏览器上从来都不是问题(据我所知)，并且在不同的移动浏览器上有不同的效果。

我已经尝试了许多不同的解决方案(摆弄定位和显示属性、以各种方式包装元素、重新定位图像)但问题仍然存在，我不知道下一步该怎么做。

Answer 1

这是一篇旧文章，但我解决这个问题的一种方法是使用 jQuery(或纯 javascript)在移动设备上将 View 高度转换为像素，以避免 vh 的值随着页面链接栏的出现/消失而变化。

这是一个使用 jQuery 的可能解决方案:

h = document.documentElement.clientHeight * 0.65;
h = (h*21)/100 //calculate percent here, in this example 21%
$('#ID').css('minHeight', h+'px');

我知道这是一篇旧帖子，但我自己也遇到过同样的问题，希望这对遇到此问题的其他人有所帮助:)