3

Firefox17で正しく機能するHTML/CSSがいくつかありましたが、Firefox 18にアップグレードした後、期待どおりに動作しなくなりました。CSSで何か間違ったことをしているのか（これは私が初めてなので完全に可能です）、Firefox18でバグが発生したのかどうかはわかりません。

次のHTMLファイルで問題が再現されます。

<html><head>
    <title>Transform test</title>

    <style>
        div.overlay {
            background-color: rgba(230, 230, 230, 0.8);
            bottom: 0;
            left: 0;
            position: fixed;
            right: 0;
            top: 0;
        }
        div.overlay.transparent {
            background-color: transparent;
        }
        div.overlayFrame {
            background-color: white;
            border: 1px solid gray;
            overflow: hidden;
            position: absolute;
        }
        div.overlayFrame0 {
            bottom: 50px;
            left: 50px;
            right: 50px;
            top: 50px;
        }
        div.overlayFrame1 {
            bottom: 45px;
            left: 55px;
            right: 45px;
            top: 55px;
        }
    </style>       
</head>

<body>
    <div class="overlay">
        <div style="-moz-transform: scale(1, 1);" class="overlayFrame overlayFrame1">
            <div class="overlay transparent">
                <div style="-moz-transform: scale(1, 1);" class="overlayFrame overlayFrame0">
                </div>
            </div>
        </div>
    </div>
</body></html>

Firefox 17では、これは5pxオフセットされた互いの上に積み重ねられたdivに生成されましたが、Firefox18ではトップdivははるかにオフセットされています。ただし、Firebugは、HTMLツリービューアでdivを選択すると、Firefox 17が表示するのと同じ場所にdivのハイライトを描画するため、誤って配置されたトップdivがまだ正しい場所にあると見なします。

これをデバッグして、外側のoverlayFrame divから「style」属性を削除すると、一番上のoverlayFramedivが「正しい」場所に表示されると判断したところまでデバッグしました。

これはFirefox18のバグですか、それとも私がしていることのバグですか？ありがとう。

4

2 に答える 2

2

この問題は、コンテキストの配置に関連しています。position: fixedこれは、 div 内に div をネストすること、position: absoluteまたはその逆によって引き起こされるようです。これを行っoverflow: hidden;て設定すると、fixeddiv の配置はウィンドウ全体に基づいています (理論的にはそうあるべきです)。ただし、overflow: visible;が設定されている場合、その配置は絶対配置された親に基づくものになります。オーバーフロー値が設定されると、Firefox で動作がどのように変化するかに注意してください。

解決策は、「紙」の背景 div をネストしないことです。2 番目を 1 番目の後に配置し、両方を単独で配置します。例 [ JSBin ]:

<html><head>
    <title>Transform test</title>

    <style>
        div.overlay {
            background-color: rgba(230, 230, 230, 0.8);
            bottom: 0;
            left: 0;
            position: fixed;
            right: 0;
            top: 0;
        }
        div.overlayFrame {
            background-color: white;
            border: 1px solid gray;
            overflow: hidden;
            position: absolute;
        }
        div.overlayFrame0 {
            bottom: 50px;
            left: 50px;
            right: 50px;
            top: 50px;
        }
        div.overlayFrame1 {
            bottom: 45px;
            left: 55px;
            right: 45px;
            top: 55px;
        }
    </style>       
</head>

<body>
  <div class="overlay"></div>
  <div style="-moz-transform: scale(1, 1);" class="overlayFrame overlayFrame1"></div>
  <div style="-moz-transform: scale(1, 1);" class="overlayFrame overlayFrame0">
    Paper!
  </div>
</body></html>
于 2013-01-09T19:56:16.437 に答える
1

そのテストケースを考えると、これがhttps://bugzilla.mozilla.org/show_bug.cgi?id=827577である可能性は十分にあります。

于 2013-01-10T07:22:37.750 に答える