'transform3d'が位置で機能しない：修正された子

通常のCSS環境で、固定divが指定された場所に正確に配置される状況があります（top:0px、left:0px）。

translate3d変換を持つ親がいる場合、これは尊重されないようです。私は何かを見ていませんか？スタイルやトランスフォームの元のオプションのような他のwebkit-transformを試しましたが、うまくいきませんでした。

黄色のボックスがコンテナー要素の内部ではなくページの上部隅にあると予想される例をJSFiddleに添付しました。

以下に、フィドルの簡略版を示します。

#outer {
    position:relative; 
    -webkit-transform:translate3d(0px, 20px , 0px); 
    height: 300px; 
    border: 1px solid #5511FF; 
    padding: 10px;
    background: rgba(100,180,250, .8); 
    width: 80%;
}
#middle{
    position:relative; 
    border: 1px dotted #445511; 
    height: 300px; 
    padding: 5px;
    background: rgba(250,10,255, .6);
}
#inner {
    position: fixed; 
    top: 0px;
    box-shadow: 3px 3px 3px #333; 
    height: 20px; 
    left: 0px;
    background: rgba(200,180,80, .8); 
    margin: 5px; 
    padding: 5px;
}

<div id="container">
    Blue: Outer, <br>
    Purple: Middle<br>
    Yellow: Inner<br>
    <div id="outer"> 
        <div id="middle">
            <div id="inner">
                Inner block
            </div>
        </div>
    </div>
</div>

位置が固定された子でtranslate3dを機能させるにはどうすればよいですか？

これは、W3C仕様transformに従って、新しいローカル座標系を作成するためです。

HTML名前空間でnoneは、変換以外の値を使用すると、スタックコンテキストと包含ブロックの両方が作成されます。オブジェクトは、固定配置された子孫の包含ブロックとして機能します。

つまり、固定位置は、ビューポートではなく、変換された要素に固定されます。

現在、私が認識している回避策はありません。

また、Eric Meyerの記事「Unfixing Fixed Elements with CSS Transforms」にも記載されています。

ページ内のアイテムが変換を使用しているときに、固定トップナビゲーションでちらつきがありました。次のようにトップナビゲーションに適用すると、ジャンプ/フリッカーの問題が解決しました。

#fixedTopNav {
    position: fixed;
    top: 0;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

SOのこの回答のおかげで

Bradoergoが示唆したように、ウィンドウscrollTopを取得して、次のように絶対位置の上部に追加します。

function fix_scroll() {
  var s = $(window).scrollTop();
  var fixedTitle = $('#fixedContainer');
  fixedTitle.css('position','absolute');
  fixedTitle.css('top',s + 'px');
}fix_scroll();

$(window).on('scroll',fix_scroll);

これはとにかく私のために働いた。

FirefoxとSafari position: sticky;では代わりに使用できますがposition: fixed;、他のブラウザでは機能しません。そのためにはJavaScriptが必要です。

私の意見では、これに対処する最善の方法は、同じ翻訳を適用することですが、修正する必要がある子を親（翻訳済み）要素から切り離すことです。次に、position: fixedラッパー内のdivに変換を適用します。

結果は次のようになります（あなたの場合）：

<div style='position:relative; border: 1px solid #5511FF; 
            -webkit-transform:translate3d(0px, 20px , 0px); 
            height: 100px; width: 200px;'> 

</div>
<div style='position: fixed; top: 0px; 
            box-shadow: 3px 3px 3px #333; 
            height: 20px; left: 0px;'>
    <div style='-webkit-transform:translate3d(0px, 20px, 0px);'>
        Inner block
    </div>
</div>

JSFiddle：https ://jsfiddle.net/hju4nws1/

これは一部のユースケースには理想的ではないかもしれませんが、通常、divを修正する場合、おそらくDOMの継承ツリーのどの要素がその親であるかを気にせず、ほとんどの頭痛を解決できるようです。 -両方translateを許可しつつposition: fixed、（相対的）調和の中で生活する。

私は同じ問題に出くわしました。唯一の違いは、「position：fixed」を持つ私の要素には、JSから設定された「top」および「left」スタイルのプロパティがあったことです。だから私は修正を適用することができました：

var oRect = oElement.getBoundingClientRect();

oRectオブジェクトには、実際の（ビューポートを基準にした）上と左の座標が含まれます。したがって、実際のoElement.style.topおよびoElement.style.leftプロパティを調整できます。

-webkit-transform：translate3dを使用するキャンバス外のサイドバーがあります。これにより、ページに固定フッターを配置できませんでした。サイドバーの初期化時にタグに追加されたHTMLページのクラスをターゲットにしてから、「-webkit-transform：none;」という状態にcss：not修飾子を書き込むことで問題を解決しました。そのクラスがhtmlタグに存在しない場合は、htmlタグに追加します。これが同じ問題を抱えている誰かに役立つことを願っています！

逆の変換を子要素に適用してみます。

<div style='position:relative; border: 1px solid #5511FF; 
            -webkit-transform:translate3d(0px, 20px , 0px); 
            height: 100px; width: 200px;'> 
    <div style='position: fixed; top: 0px; 
                -webkit-transform:translate3d(-100%, 0px , 0px); 
                box-shadow: 3px 3px 3px #333; 
                height: 20px; left: 0px;'>
        Inner block
    </div>
</div>

要素の変換中に動的クラスを追加します。$('#elementId').addClass('transformed')。次に、CSSで宣言します。

.translat3d(@x, @y, @z) { 
     -webkit-transform: translate3d(@X, @y, @z); 
             transform: translate3d(@x, @y, @z);
      //All other subsidaries as -moz-transform, -o-transform and -ms-transform 
}

その後

#elementId { 
      -webkit-transform: none; 
              transform: none;
}

その後

.transformed {
    #elementId { 
        .translate3d(0px, 20px, 0px);
    }
}

これで、子要素にプロパティ値とプロパティ値がposition: fixed提供されると、正常に動作し、親要素が変換されるまで固定されたままになります。変換が元に戻されると、子要素は再び固定された状態でポップします。これは、実際にクリックで開閉するナビゲーションサイドバーを使用していて、ページを下にスクロールしても粘着性を維持するタブセットがある場合に、状況を緩和します。topz-index

これに対処する1つの方法は、同じ変換を固定要素に適用することです。

<br>
<div style='position:relative; border: 1px solid #5511FF; 
            -webkit-transform:translate3d(0px, 20px , 0px); 
            height: 100px; width: 200px;'> 
    <div style='position: fixed; top: 0px; 
                -webkit-transform:translate3d(0px, 20px , 0px); 
                box-shadow: 3px 3px 3px #333; 
                height: 20px; left: 0px;'>
        Inner block
    </div>
</div>