0

私は自分の問題を示すために単純な jsfiddle を作成しました: http://jsfiddle.net/9MD43/

Chrome でボックスのサイズを変更しても、ボックスは緑色のままです。これが私の望みです。Firefox でボックスのサイズを変更しようとすると、フレックス ボックスが縮小されて何も表示されなくなるため、ボックスが赤くなります。Internet Explorer 10 は Chrome と同じように動作し、ボックスは緑色のままです (この例には示されていません)。

この問題は、スクリプトから .draggable コマンドを削除することで軽減できます。

$("#outer").resizable().draggable(); // <-- removing .draggable() will keep the box green in Firefox after resizing

マークアップは非常に単純で、派手なものは何もありません:

<div id="outer">
    <div id="content">
        <div id="list">
        </div>
    </div>
</div>

"#outer" はフレックス ボックスで、"#content" はフレックス 1 です。

「#content」は相対配置、「#list」は絶対配置です。私のアプリの完全版では、アイテムを動的に "#list" div に追加し、overflow: scroll を適用しています。これが、この単純な例では CSS が異常に見える理由です。

これは jquery の .draggable や Firefox のバグですか? また、この問題に対する明確な回避策はありますか?

[編集] もっと単純な例: http://jsfiddle.net/LXmuL/

ボックスのサイズを変更すると、Firefox ではフレックスが折りたたまれますが、Chrome では折りたたまれません。これは、ボックスの背景色で確認できます。

4

1 に答える 1

0

バグを見つけました。

jquery は、ドラッグ可能な要素に絶対配置を追加します。Firefox には、フレックス ボックスと絶対配置に関する長年のバグがあります: https://bugzilla.mozilla.org/show_bug.cgi?id=579776。実際、外側のボックスの位置を絶対に設定するだけで、私の例でフレックス ボックスを折りたたむことができます。

于 2013-03-29T04:18:12.227 に答える