相対的な高さを持つ要素が高さ/スクロールで移動します（モバイル）

Question

次の画像が示すように、特定のポイント（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; 

ビューポートユニットを使用して高さを設定するとき、私はより頻繁に、前にこの問題に遭遇しました。デスクトップブラウザでは（私が知る限り）問題はなく、さまざまなモバイルブラウザにさまざまな影響を与えます。私は（位置決め及びディスプレイのプロパティをいじるさまざまな方法で要素を包む、画像を再配置）ソリューションで異なる試みの多くを経てきたが、問題が解決しないと私はどこに知らない

​​

次へ

Answer 1

これは、モバイルでChromeをスクロールしているときのアドレスバーの非表示/表示によるものであることがわかりました。これが起こると、ビューポートは本質的にサイズ変更され、ビューポートに相対的なサイズのものがジャンプします。

編集：これに対する解決策は、JSを使用して高さを設定することです：

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