web-dev-qa-db-ja.com

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

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

Firefoxでは正常に動作しますが、Webkitベースのブラウザーでは破損しています。 -webkit-transformを使用した後、修正された位置が機能しなくなりました！そんなことがあるものか？

htmlcsspositioningrotation
148
iSenne

いくつかの調査の後、この問題に関して バグレポート が 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つの効果のため、仕様の側面のように見えます。 この回答で説明したとおり 。

81
Kyle

CSS Transforms spec は、この動作を説明しています。変換を持つ要素は、固定位置の子孫の包含ブロックとして機能するため、変換を持つ何かの下にあるposition：fixedの動作は固定されなくなりました。

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

87
smfr

背景画像と同じ問題が原因で、背景画像が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');

    });
}
7
Jayden Lawson

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

6
defligra

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

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/

3
lowselfesteemsucks

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

.fixed {
     position: sticky;
}
3
yckart

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

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

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

非常に特殊な構造であるため、普遍的に適用可能な1行のCSS修正ではありませんが、おそらく誰かがそれをいじってSafariとFirefoxで動作させることができます。

1
Kerry Johnson

私のphonegapプロジェクトでは、webkit変換-webkit-transform：translateZ（0）;魅力のように働いた。すでにchromeとsafariで機能していましたが、モバイルブラウザではありませんでした。また、WRAPPER DIVが完了しない場合もあります。フローティングDIVの場合は明確なクラスを適用します。

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

テスト済みのすべてのブラウザーとモバイルデバイス（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%);
}
0
TrackABill.com

オプションとして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はコンテナに基づいて計算するため、高さと幅も調整する必要があります。それはあなたのユースケースに依存しますが、これはコンテナに関係なく、何かの位置を予想通りに固定できるようにします。

0
Adrian Adkison

要素が変換している間に動的クラスを追加します。$('#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プロパティ値が提供された場合に固定され、正常に機能し、親要素が変換されるまで固定されたままになります。変換が元に戻されると、子要素は再び修正済みとしてポップされます。これにより、クリック時に開いたり閉じたりするナビゲーションサイドバーを実際に使用していて、ページを下にスクロールするときに固定されるタブセットがある場合、状況が緩和されます。

0
mr.G

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

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

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

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

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