-webkit-transformを使用すると、固定位置が機能しない

-webkit-transform（および-moz-transform / -o-transform）を使用してdivを回転させています。また、divがユーザーと共にスクロールダウンするように、位置が固定されています。

Firefoxでは正常に動作しますが、Webkitベースのブラウザでは機能しません。-webkit-transformを使用すると、固定位置が機能しなくなります。そんなことがあるものか？

いくつかの調査の後、この問題についてChromium Webサイトにバグレポートがありました。これまでのところ、Webkitブラウザーはこれら2つの効果を同時にレンダリングできません。

WebkitのみのCSSをスタイルシートに追加し、変換されたdivを画像にして、それを背景として使用することをお勧めします。

@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* Webkit-specific CSS here (Chrome and Safari) */

  #transformed_div {
    /* styles here, background image etc */
  }
}

したがって、今のところは、WebkitブラウザーがFFに追いつくまで、昔ながらの方法で行う必要があります。

編集：2012年10月24日現在、バグは解決されていません。

これはバグではないようですが、2つの影響のために別々の座標系とスタック順序が必要であるため、仕様の一部です。この回答で説明したように。

CSSトランスフォーム仕様では、この動作を説明します。変換を伴う要素は、固定位置の子孫の包含ブロックとして機能するため、変換を伴う何かの下でのposition：fixedの動作は修正されなくなりました。

同じ要素に適用すると機能します。要素は固定として配置され、変換されます。

background-attachmentと同じ問題が原因でChromeで背景画像が表示されなくなったことがわかった場合は、修正しました。-これは私の解決策でした：

// run js if Chrome is being used
if(navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
    // set background-attachment back to the default of 'scroll'
    $('.imagebg').css('background-attachment', 'scroll');

    // move the background-position according to the div's y position
    $(window).scroll(function(){

        scrollTop = $(window).scrollTop();
        photoTop = $('.imagebg').offset().top;
        distance = (photoTop - scrollTop);
        $('.imagebg').css('background-position', 'center ' + (distance*-1) + 'px');

    });
}  

私のために働いた何か（少しハック）はposition:sticky代わりにです：

.fixed {
     position: sticky;
}

2016年8月と固定位置とアニメーション/変換はまだ問題です。私にとって有効だった唯一の解決策は、より長い時間がかかる子要素のアニメーションを作成することでした。

実際、私はこの「バグ」を修正する別の方法を見つけました：

css3アニメーションでページを保持するコンテナー要素があります。ページがアニメーションを完了したとき、css3プロパティには値があります：transform：translate（0,0）;。だから、私はこの行を削除しただけで、すべてが正常に機能しました-position：fixedが正しく表示されます。cssクラスを適用してページを翻訳すると、translateプロパティが追加され、css3アニメーションも機能します。

例：

.page {
     top: 50px;
     position: absolute;
     transition: ease 0.6s all;
     /* -webkit-transform: translate(0, 0); */
     /* transform: translate(0,0); */
 }
 .page.hide {
     -webkit-transform: translate(100%, 0);
     transform: translate(-100%, 0);    
 }

デモ：http : //jsfiddle.net/ZWcD9/

私の電話ギャッププロジェクトでは、webkit変換-webkit-transform：translateZ（0）; 魅力のように働いた。これは、モバイルブラウザではなく、ChromeとSafariですでに機能していました。また、場合によってはWRAPPER DIVが完了しないというもう1つの問題が発生する可能性があります。フローティングDIVの場合は、明確なクラスを適用します。

<div class="Clear"></div> .Clear, .Clearfix{clear:both;}

SafariでもFirefoxでも複製できないため、おそらくChromeのバグが原因ですが、これはChrome 40.0.2214.111で機能しますhttp://jsbin.com/hacame/1/edit?html,css,output

これは非常に特殊な構造であるため、普遍的に適用可能な一行のcss修正ではありませんが、SafariやFirefoxで動作させるために誰かがいじることができます。

react-swipeable-views（rsw）でreact-colorを実装しようとしているときにこの問題が発生しました。私にとっての問題は、rswがタブパネルに適用さtranslate(-100%, 0)れ、クリックするとカラーピッカーモデルを閉じるフルスクリーン上に追加されたデフォルトの固定位置divに違反することでした。

私にとっての解決策は、反対の変換を固定要素に適用することでした（この場合translate(100%, 0)、私の問題は修正されました。これが他の場合に役立つかどうかはわかりませんが、とにかく共有すると思います。

これは私が上で説明したことを示す例です：

https://codepen.io/relativemc/pen/VwweEez

を-webkit-transform固定要素に追加すると、問題が解決しました。

.fixed_element {
   -webkit-transform: translateZ(0);
   position: fixed;
   ....
} 

テスト済みのすべてのブラウザーとモバイルデバイス（Chrome、IE、Firefox、Safari、iPad、iphone 5および6、Android）で動作するのは次のとおりです。

img.ui-li-thumb {
    position: absolute;
    left: 1px;
    top: 50%;

    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

祖先に変換を適用すると、要素の固定位置が壊れます。

<div style='position:fixed;-.*-transform:scale(2)'>...</div> //ok

<div style='-.*-transform:scale(2)'>
      <div style='position:fixed'>...</div> // broken
</div>

オプションとしてjavascriptを使用できる場合、これは、位置が固定された要素を、変換された要素内にあるときにウィンドウに対して相対的に配置するための回避策になります。

  let fixedEl // some node that you is position 
              // fixed inside of an element that has a transform

  const rect = fixedEl.getBoundingClientRect()
  const distanceFromWindowTop = rect.top
  const distanceFromWindwoLeft = rect.left
  let top = fixedEl.offsetTop
  let left = fixedEl.offsetLeft

  if(distanceFromWindowTop !== relativeTop) {
    top = -distanceFromWindowTop
    fixedEl.style.top = `${top}px`
  }

  if(distanceFromWindowLeft !== relativeLeft) {
    left = -distanceFromWindowLeft
    fixedEl.style.left = `${left}px`
  }

当然fixedElながら、コンテナに基づいて計算されるため、高さと幅を調整する必要があります。これはユースケースによって異なりますが、これにより、コンテナーに関係なく、何かの位置を固定して予測どおりに設定できます。

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

.translatX(@x) { 
     -webkit-transform: translateX(@X); 
             transform: translateX(@x);
      //All other subsidaries as -moz-transform, -o-transform and -ms-transform 
}

その後

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

その後

.transformed {
    #elementId { 
        .translateX(@neededValue);
    }
}

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

私の場合、transform：translateY（）の前にtransform：translateX（）を使用できないことがわかりました。両方を使用する場合は、transform：translate（、）を使用する必要があります。

賛成票を投じないでください。これは正確な答えではありませんが、変換をオフにするだけの速い方法であるため、誰かを助けることができます。親の変換が本当に必要なく、固定位置を再び機能させたい場合：

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