168

-webkit-transform (および -moz-transform / -o-transform) を使用して div を回転させています。また、div がユーザーと共に下にスクロールするように位置固定を追加します。

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

4

17 に答える 17

94

いくつかの調査の後、この問題に関するバグ レポートが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 つの効果による仕様の側面です。この回答で説明されているように。

于 2010-04-14T12:25:12.003 に答える
9

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

.fixed {
     position: sticky;
}
于 2013-07-21T15:02:49.110 に答える
7

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

    });
}
于 2014-01-13T23:43:22.100 に答える
7

2016 年 8 月および固定位置 & アニメーション/トランスフォームはまだ問題です。私にとってうまくいった唯一の解決策は、子要素に時間がかかるアニメーションを作成することでした。

于 2016-08-16T19:45:16.867 に答える
3

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

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/

于 2014-07-17T15:55:14.183 に答える
1

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

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

于 2015-02-13T14:05:49.460 に答える
0

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

.fixed_element {
   -webkit-transform: translateZ(0);
   position: fixed;
   ....
}
于 2013-03-06T15:23:00.103 に答える
0

テスト済みのすべてのブラウザーとモバイル デバイス (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%);
}
于 2015-05-14T17:57:38.053 に答える
0

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

于 2017-08-11T01:34:37.960 に答える
-1

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

#element_with_transform {
  -webkit-transform: none;
  transform: none;
}
于 2017-08-08T14:05:15.940 に答える