web-dev-qa-db-ja.com

position：Googleで機能しない問題を修正Chrome

GoogleChromeの「fixed」要素に問題があります。この要素は、他の主要なブラウザと同じように動作します。

CSSは次のとおりです。

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

問題は、ページが読み込まれると、要素がビューポートの下部に固定されることです。スクロールすると、ページが読み込まれたときと同じ場所に残ります。画面の下部に固定されたままにはなりません。

cssgoogle-chromecss-position
15
Dln

次のコードを要素に追加してみてください。

-webkit-transform: translateZ(0);
27
scooterlord

私はプロパティを持っていました：-webkit-perspective:800;bodyタグ。これを削除すると、固定位置が再び機能し始めました...あいまいですが、一見の価値があります。

8
Gavin Lovegrove

獲得した回答への追加として：これは機能しません親要素の1つに"-webkit-transform-style：preserve-3d"がある場合。理由はわかりませんが、それを持って削除しました。

4
Dima Litvinov

これを表示するには、左の位置も配置する必要がありました...上部だけではありません：

{
    left: 0px;
}
1
Robin Morris

この答えはどれも私にはうまくいきませんでした。私のために働いたのは、親要素のcontainプロパティをnoneに設定することです。

{
  contain:none !important;
}
1
tariksoypt

私は無効にしなければなりませんでした：

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

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

1
Marcin Rapacz

今はposition: sticky; bottom: 0;を使いました。

#element { 
   position: sticky; <--- 
   bottom: 0px; 
   width: 100%; 
   height: 50px; 
   z-index: 10;
}
1
alex351

まず、親が持っているかどうかを確認します

-webkit-transform: translateZ(...);

または

transform: translateZ(...);

または

-webkit-transform: translate3d(...)

または

transform: translate3d(...)

それらを削除してみてください。

それでも機能しない場合は、追加してみてください

-webkit-transform: translateZ(0);

または

transform: translateZ(0);

あなたの要素に。

それでも機能しない場合は、親の他の-webkit-transform/transform/spectiveスタイルを確認して削除します。

0
Pavel Maximov

プロパティwill-change:transform;が問題の原因でした。 will-change:auto;を追加してオーバーライドする必要があります。

0
Matt Scott

他の回答が言っていることを完了するために、親要素にwill-changeプロパティを設定すると、固定位置が壊れることにも注意してください。

0
remidej

削除して修正しました

filter: blur(0);

親要素で。私はクロムでのみこの問題を抱えていました、それはSafariでうまく機能していました。

0
zookd