2013-12-10 9 views
10

Google Chromeの「固定」要素に問題があります。この要素は、他の主要なブラウザーと同様に動作します。ここで位置:Google Chromeで動作しない固定

は、CSSです:

#element { position: fixed; bottom: 0px; width: 100%; height: 50px; z-index: 10;} 

問題は、ページのロード時にそれがあるべきように、要素は、ビューポートの下部に固定されています。スクロールすると、ページがロードされたときと同じ場所にとどまり、画面の下部に固定されません。

ご迷惑をおかけして申し訳ありません。あなたの要素に次のコードを追加し

おかげ

+2

クロム上のCSSルールでは再現できないため、さらに問題があるはずです。 http://jsbin.com/UcIpANol/1/はChromeで正常に動作します。 – Erik

+0

[JSFiddle](http://jsfiddle.net/) –

答えて

27

試し:-webkit-展望:

-webkit-transform: translateZ(0); 
+0

ありがとう!これはうまくいった。 – Dln

+3

私は助けることができてうれしいです。私は多デバイス/ブラウザのものを設計する私の目を食べた...編集:それが助けられた場合、受け入れることは正しい答えであり、それは他人にも同様に役立つかもしれない – scooterlord

+0

それはさらに悪い私のために:http:// jsfiddle .net/Supuhstar/t04nh943/to http://jsfiddle.net/Supuhstar/t04nh943/2/ – Supuhstar

7

私が持っていた財産800;これを削除し、固定位置がはっきりしない...再び働き始めましたが、勝ったの答えに加えようになり

+3

感謝します。君は。 I. WAS。行く。 *** INSANE ***。 –

+0

ありがとうございました –

+0

私はパースペクティブプロパティを削除してもそれは私のために働くが、私は視差効果のためにそれを必要とする...これは吸う。 – pmrotule

4

価値 ... bodyタグに:あなたは「-webkitを持っている場合これはを動作しないでしょう-transform-style:preserve-3d "親要素の1つにがあります。私はなぜ、私はちょうどそうし、それを削除したのか分からない。

1

私は無効にする必要がありました:

-webkit-transform: none !important; 
transform: none !important; 

を私のためにそれを作るために。

関連する問題