元素的相对高度变化高度/滚动上的跳动（移动）

如下图所示，滚动浏览某个点（Chrome，Android 6.0.1）时，.hero div的高度会发生变化。元素的相对高度变化高度/滚动上的跳动（移动）

下面是相关的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;

我已经遇到这个问题之前，更多的时候设置高度使用视单位的时候。这在桌面浏览器中从来都不是问题（根据我的说法），并对不同的移动浏览器有不同的影响。

我已经通过很多不同的尝试，在解决了（与定位和显示性能摆弄，包裹各种方式的元素，重新定位图像），但问题仍然存在，我不知道在哪里下一步。

来源

2016-08-14 senojoeht

这是'填充：.1px;'真的有必要吗？没有它就测试你的页面。 – Aziz

从我有一个边缘崩溃问题时剩下的，最初就解决了这个问题。 – senojoeht

发现这是由于在移动Chrome浏览器中滚动时地址栏隐藏/显示。当发生这种情况时，视口实质上会调整大小，导致相对于视口大小的任何内容都跳跃。

编辑：解决的办法是使用JS设置高度：

var windowHeight = window.innerHeight; 
windowHeight += 'px'; 
console.log(windowHeight); 
var hero = document.getElementById('hero'); 
hero.style.height = windowHeight;

来源

2016-08-15 09:14:19 senojoeht

元素的相对高度变化高度/滚动上的跳动（移动）

回答

相关问题