位置固定 - ドキュメントの流れが途切れることはありません

Question

私のCSSではかなりうまくいっています。フロントエンドの開発については、ほとんどのことが何をするのかが分かります。しかし、私は今日、私が完全に理解していない問題を見つけました。

相続コード：

.nav-toggle { 
 
    position: absolute; 
 
    transform: translateY(50%); 
 
} 
 

 
.nav-open .nav-toggle:after { 
 
    background: rgba(0, 0, 0, 0.5); 
 
    content: ''; 
 
    display: block; 
 
    height: 100%; 
 
    position: fixed; 
 
    right: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    z-index: 1; 
 
}

<span data-action="toggle-nav" class="action nav-toggle"> 
 
     <span>Menu</span> 
 
</span>

ここでは、そのためのフィドルです：

https://jsfiddle.net/0vm962be/1/

そしてここでは、変換コメントアウトを有する第二バイオリンです。

https://jsfiddle.net/0vm962be/2/

だからあなたは違いが表示されます。

親要素に.nav-openクラスがある場合、後ではボディの幅が100％、身体の高さが100％になることが予想されます。

しかし理由コードの1本の単純な線（変換：移動Y（50％））から、これが起こらない、どのような実際に起こること固定要素は.nav-トグルの内部絶対配置要素のように作用しますその親には100％しか行きません。

なぜ親のトランスフォームは固定要素の影響を受けますか？私も位置：固定;は何があってもドキュメントの流れを壊しました。そして、ウィンドウ幅の高さだけを聞いた。なぜこれが起こったのかを知る必要があります。

アドバイスは素晴らしいでしょう。スペックなどへのリンク？

Answer 1

母親、面白いです。私はずっと前と同じ問題を抱えていました。

明らかに、Webkitブラウザのバグです。 を参照してください：https://bugs.chromium.org/p/chromium/issues/detail?id=20574 をここに述べたように：https://stackoverflow.com/a/2637267/2632061意味

が、これは残念ながら、働くことができる方法はありません。 あなたはおそらくフレックスボックスと似たようなものを試すことができますが、達成しようとしているのは何ですか？それは私のものです。 HTMLの名前空間、スタッキングコンテキストと含む ブロックの両方の作成で変換 結果のためにnone以外の任意の値で

。このオブジェクトは、固定された位置にある子孫ブロックの子ブロックとして機能します（ 子孫）。

これは、ビューポートではなく、変換された要素に対して固定の固定が固定されることを意味します。

Answer 2

使用VHとVWの代わりにパーセント： https://jsfiddle.net/93ybxgau/1/

.nav-open .nav-toggle:after { 
    background: rgba(0, 0, 0, 0.5); 
    content: ''; 
    display: block; 
    height: 100vh; 
    position: fixed; 
    left: 0; 
    top: 0; 
    width: 100vw; 
    z-index: 1; 
}