web-dev-qa-db-ja.com

CSS：位置：位置の内側に固定：絶対

私はいくつかの非常に奇妙な動作に遭遇しており、テストしたすべてのブラウザーで一貫性がありません。

私はかなり複雑なレイアウトをしていますが、主な問題はここにあります：

<div id="drop">
  <div id="header"></div>
</div>

#dropにはposition:absoluteとz-index:100があります
#headerにはposition:fixed; top:60px;があります

下にスクロールし始めると、Chromeはposition:fixedルールを無視します。#dropから上記の2つのスタイルのどちらかを削除すると、Chromeが始まりますposition:fixedルールを尊重します。

ubuntuで動作しないChrome 23.0.1271.97で、Macでも同じ動作が見られるChrome 25.0.1364.99。私の友人がUbuntuを使用しているChrome 25.0.1364.68ベータ版で、彼にとっては正常に動作します。Firefoxでテストしたところ、（他の症状と共に）ある程度動作しました。

誰かがこのエラーを聞いたことがありますか？または誰でもそれを再現できますか？

編集する

Openlayersマップをposition:fixedで別のdivとして使用していますが、そのレイヤーを削除するか、少なくともdisplay:noneに変更すると、この奇妙なバグはなくなります。

編集する

このバグが発生しているときに、ズームレベルを前後に変更すると、位置が適切な動作に調整されます。私にとって、これはスクロール時に一部の内部コールバック関数を実行できないWebkitの問題を示しています。

もう1つの非常に奇妙なことは、#header内にいくつかのリンクがあり、divがそこに表示されていなくても、予想される場所をクリックするだけでリンクが機能することです。全体これはレンダリングのみであることに気づきました壊れています。ウィンドウのサイズを変更したり、ズームを変更したり、単にSelect-Allを実行したりして、ブラウザーを強制的に再レン​​ダリングすると、ヘッダーバーが適切な位置にジャンプしますが、固定されません。

google-chromecsswebkitopenlayers
28
Mikhail

OpenLayersがCSS変換を使用することをコメントで述べました。それが事実です：

位置が固定された要素は、変換された要素に相対的になります-ビューポートに相対的ではありません

仕様を見てみましょう： 変換レンダリングモデル

「変換」プロパティに「なし」以外の値を指定すると、それが適用される要素で新しいローカル座標系が確立されます。

これを見てください [〜＃〜] fiddle [〜＃〜] これを実際に見るには

<div class="wpr">
    <div class="fixed"></div>
</div>

.wpr
{
    width: 200px;
    height:1000px;
    background: pink;
    position:relative;
    margin: 0 200px;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
.fixed
{
    width: 200px;
    height:200px;
    margin: 50px;
    position: fixed;    
    top:0;
    left:0;
    background: aqua;
}
25
Danield

受け入れられた答えが言うように、これは意図された動作であり、仕様に準拠しています。これのもう1つの重要なコンポーネントは、CSS変換を使用することの意味です。

あなたの場合、それはOpenLayersが原因でしたが、これはwill-change: transformを使用しているすべての人にも当てはまります（おそらくこの質問にアクセスする多くの人々）。これはChromiumバグトラッカー here で取り上げられ、WontFixとマークされています。公式コメントはこれです：

この動作は仕様で必要です（ http://dev.w3.org/csswg/css-will-change/ ）： "プロパティの非初期値が原因で要素が固定位置要素の包含ブロックを生成します。will-changeでそのプロパティを指定すると、要素は固定位置要素の包含ブロックを生成する必要があります。」

アイデアは、will-change：transformが指定されると、再配置するために固定位置の子孫を必要とせずに、変換を追加、削除、変更できるようになるということです。

Will-changeの他の値（不透明度、トップなど）を使用しても、固定位置の子孫の位置は変更されないことに注意してください。

私が知る限り、唯一の解決策は、will-change要素のchildをsibling代わりに、属性がカスケードしないようにします。

補足として、私の特定のケースでは、will-change属性を使用してより具体的にすることで修正できました。 GPUオフロードが必要なperformance-jarring要素を含むdivで使用する代わりに、問題のある要素で直接使用しました。これは元々の不正なコードが原因でしたが、ほとんどの場合は機能しません。

2
forresthopkinsa

私はchromeを無視して苦労していたため、別の可能な解決策を追加したいと思っています。最終的に原因を見つけるまで、position：fixedを無視しています。

-webkit-perspective: 1000;

それは私が使用していたプラグインからのものであり、すべてのposition：fixed要素が無視されます。それが誰かを助けることを願っています。

0
parliament