web-dev-qa-db-ja.com

「transform3d」が位置で機能しない：固定子

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

Translate3d変換を持つ親がある場合、これは尊重されないようです。私は何かを見ていませんか？スタイルのような他のwebkit-transformやOriginオプションの変換を試しましたが、運がありませんでした。

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を固定位置の子で動作させるにはどうすればよいですか？

htmlcsscss3css-positioncss-transforms
130
Juan Carlos Moreno

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

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

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

現在のところ、回避策はありません。

Eric Meyerの記事にも記載されています： CSS変換による固定要素の固定解除 。

183
saml

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

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

SOに関するこの回答のおかげ

13
rob.m

Bradoergoが提案したように、ウィンドウscrollTopを取得し、次のように絶対位置topに追加します。

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);

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

12
UzumakiDev

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

3
Dušan

私の意見では、これに対処する最善の方法は同じ翻訳を適用することですが、親（翻訳）要素から修正する必要がある子を壊すことです。そして、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の両方を（相対的な）調和で生かせるようにします。

3
reid

私は同様の問題を抱えており、それを回避する方法があると信じています。 snap.jsを使用していますが、コンテンツコンテナーの子divの1つをその位置に固定する必要があります。ただし、ドロワーが開くと、JavaScriptは親コンテナーのtransform：translate3dプロパティを起動し、これは固定子要素にも影響します（固定要素は親とともに移動し、新しい位置に固定されたままになります）。

これが言われると、固定プロパティは部分的に役に立たなくなります。これを解決するために、固定子divに対して個別のtranform：translate3dを起動するイベントリスナーを追加できます。そして、この変換の方向は、親のtransform：translate3dと反対でなければなりません。

唯一の問題は、私はそれを書く方法がわからないということです、そして誰かがそれを刺したなら、それはクールだっただろう。

1
Anson Wakaka

反対の変換を子要素に適用してみてください：

<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>
0
Mari Do

-webkit-transform：translate3dを使用するオフキャンバスサイドバーがあります。これにより、ページに固定フッターを配置できませんでした。サイドバーの初期化時にタグに追加されたhtmlページのクラスをターゲットにし、「-webkit-transform：none;」を示すcss：not修飾子を記述することで問題を解決しました。そのクラスがhtmlタグに存在しない場合、htmlタグに。これが同じ問題を抱えている人の助けになることを願っています！

0
WeisbergWeb

要素が変換している間に動的クラスを追加します。$('#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);
    }
}

子要素のtopプロパティ値とposition: fixedプロパティ値を指定すると、z-indexは正常に機能し、親要素が変換されるまで固定されたままになります。変換が元に戻されると、子要素は再び修正済みとしてポップされます。これは、クリック時に開閉するナビゲーションサイドバーを実際に使用しており、ページを下にスクロールするときに固定されるタブセットがある場合に、状況を緩和するはずです。

0
mr.G

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

var oRect = oElement.getBoundingClientRect();

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

0
Mike Dobrin