web-dev-qa-db-ja.com

Chromeレンダリングの問題。ボディ内のULによる位置アンカーを修正

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が表示されなくなることがあります。

このような動作を回避するために何ができますか？

htmlcssgoogle-chromerendering
56
sunsay

Chromeソリューション：

-webkit-transform: translateZ(0)を_#sidebar_に追加すると、問題が修正されました。

私はtranslateZ(0)を使用して、多数のChrome表示バグを長年にわたって修正しました。3D変換を呼び出すことにより、再ペイントはCSSの残りの部分から分離されますペインスタック（これ以上詳細を説明することはできませんが、ほとんどすべてがギリシャ語です）。

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

Operaソリューション：

これは一般的な解決策ではありません（問題の要素の配置要件に応じて調整する必要があります）。レイアウトに影響を与える可能性のあるプロパティに連続的な再描画を強制することで機能します（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）：このバグのバリエーションに頻繁に遭遇しました。元のポスターの縮小テストケースは完全に正当なバグを示しますが、ほとんどの場合、すでに3D変換が本体で動作している（または同様にDOMツリーの上位にある）状況で発生しています。これは、GPUレンダリングを強制するハックとしてよく使用されますが、実際にはこのような厄介な再描画の問題につながります。 2つのノーオペレーション3Dトランスフォームは適切ではありません。ツリーの上位で1つを使用している場合、別のトランスフォームを追加する前にまず削除してみてください。

EDIT 3（2014-12-19）：ChrisreportstranslateZ(0)が機能する場合、scale3d(1,1,1)は機能しないことがあります。

169
Barney

Chromeのキーは：

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

これを追加することにより、固定位置の問題を修正する必要があります。

15
Corneliu

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

どの要素にも高さは宣言されておらず、＃sidebarは、position:fixed。

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

Normalize.cssを含めることをお勧めします。バグを処理してくれると思います。

0
George Katsanos