57

次のようなコードを使用すると、Google Chrome と Opera でレンダリングの問題が発生します (なぜ?=)。

<html>
<style>
    #content {
        width: 150px;
        background: gray;
    }

    #sidebar {
        position: fixed;
        left: 200px;
        background: gray;
    }
</style>
<body>
    <div id="sidebar">
        <a href="#s1">Link #1</a><br/>
        <a href="#s2">Link #2</a>
    </div>

    <div id="content">
        <div id="s1">
            <a href="#s1">Link #1 TARGET</a>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis aute irure dolor in reprehenderit in voluptate velit
            esse cillum dolore eu fugiat nulla pariatur.
            Excepteur sint occaecat cupidatat non proident, sunt in culpa
            qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div id="s2">
            <a href="#s2">Link #2 TARGET</a>
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
            </ul>
        </div>
    </div>

    <a href="#">TOP</a>
</body>
</html>

ご覧のとおり、右側のサイドバーを静的にしようとしています。<UL>ページにタグを追加するまで、すべてが正常に機能します。

http://www.youtube.com/watch?v=zkhH6di2M0c

アンカー リンクをクリックすると、固定 div が消え始めることがあります。

そのような行動を避けるために何ができるでしょうか？

4

3 に答える 3

169

クローム ソリューション:

私のために修正された問題に追加-webkit-transform: translateZ(0)します。#sidebar

私はtranslateZ(0)何年にもわたって数多くの Chrome 表示バグを修正してきました。理論的根拠は、3D 変換を呼び出すことにより、再描画が CSS ペイン スタックの残りの部分から分離されることです (それ以上の詳細は提供できません。私にとってはほとんどすべてギリシャ語です)。いずれにせよ、それは私のために働くようです！

    #sidebar {
        -webkit-transform: translateZ(0);
    }

オペラ ソリューション:

これは一般的な解決策ではありません (問題の要素の配置要件に応じて微調整する必要があります)。これは、レイアウトに影響を与える可能性のあるプロパティで (CSS アニメーションを介して) 継続的な再描画を強制することによって機能します (他のレイアウト要素を計算してレンダリングすることを強制する、つまり固定位置を維持する) が、実際にはそうしません。この場合、ページ レイアウトに影響を与える方法がないため、私は を使用しましmargin-bottomた (ただし、Opera はそれを知りません!)。

@keyframes noop {
  0%   { margin-bottom: 0; }
  100% { margin-bottom: 1em; }
}

#sidebar {
    animation: noop 1s infinite;
}

注:この解決策は完全ではありません。(少なくとも私のマシンでは) Opera が位置を失い、すぐに再描画されるため、バグ テスト ケースでわずかなちらつきが発生します。悲しいことに、ジョージが彼の答えで言っているように、これは再描画の間の Opera の自然な動作であるため、これはあなたが得るのと同じくらい良いと思います.

EDIT 2 (2013-11-05) :それ以来、このバグのバリエーションにかなり頻繁に遭遇しました。元の投稿者の縮小されたテスト ケースは完全に正当なバグを示していますが、ほとんどの発生は、本体 (または同様に DOM ツリーの上位) で動作する 3D 変換が既に存在する状況で発生しています。これは、GPU レンダリングを強制するためのハックとしてよく使用されますが、実際にはこのような厄介な再描画の問題につながります。2 つのノーオペレーション 3D 変換は正しくありません。ツリーの上位にあるものを使用している場合は、別のものを追加する前にまずそれを削除してみてください。

編集 3 (2014-12-19) : Chris は、一部のケースでは機能しないと報告しています。translateZ(0)scale3d(1,1,1)

于 2013-03-04T14:31:10.373 に答える
15

Chrome のキーは次のとおりです。

 html, body {height:100%;overflow:auto}

これを追加することで、固定位置の問題が修正されるはずです。

于 2013-03-04T14:34:09.860 に答える
0

ドキュメントの通常のフローがどのように機能するかを理解していれば、それは理にかなっています。エッジケースのシナリオだとしましょう。

高さはどの要素にも宣言されておらず、 #sidebar は であることによってドキュメントの通常の流れから外されposition:fixedます。

高さのプロパティを #sidebar (パーセンテージではなくピクセル) に追加すると、問題は解決します。

Normalize.css を含めることをお勧めします。これでバグが解決されると思います。

于 2013-03-06T11:09:30.963 に答える