크롬 렌더링 문제.

lottogame 2020. 12. 28. 07:44

크롬 렌더링 문제. 본체에 UL이있는 고정 위치 앵커

Google Chrome 및 Opera (왜? =)에 다음과 같은 코드로 렌더링 문제가 있습니다.

    #content {
        width: 150px;
        background: gray;

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

    <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 id="s2">
            <a href="#s2">Link #2 TARGET</a>
                <li>Item 1</li>
                <li>Item 2</li>

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

보시다시피 오른쪽에서 사이드 바를 정적으로 만들려고합니다. <UL>페이지에 태그 를 추가 할 때까지 모든 것이 잘 작동합니다 .

앵커 링크를 클릭하면 고정 div가 사라지기 시작하는 경우가 있습니다.

그러한 행동을 피하려면 어떻게해야합니까?

Chrome 솔루션 :

추가 -webkit-transform: translateZ(0)받는 사람은 #sidebar나를 위해 문제를 해결했습니다.

내가 사용했던 translateZ(0)지난 몇 년 동안 많은 크롬 디스플레이 버그를 해결하기 위해. 이론적 근거는 3D 변환을 호출함으로써 다시 칠하기가 나머지 CSS 고통 스택과 분리된다는 것입니다 (그보다 더 자세한 내용을 제공 할 수는 없지만 거의 그리스어입니다). 어쨌든 그것은 나를 위해 일하는 것 같습니다!

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

Opera solution:

This is not a generic solution (will need to be tweaked depending on the positioning requirements of the element in question). It works by forcing continuous repaints (via CSS animation) on a property that could affect layout (forcing other layout factors to be calculated and rendered, ie maintaining fixed positioning), but in practice do not. In this case, I've used margin-bottom, because there's no way that's going to affect your page layout (but Opera doesn't know that!):

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

#sidebar {
    animation: noop 1s infinite;

Note: the solution is not perfect, in that (on my machine at least) the bug test cases will result in a minute flicker as Opera loses positioning and quickly redraws. Sadly I think this is as good as you will get, because as George says in his answer, this is Opera's natural behaviour between redraws — in theory my code makes redraw for the element continuous, but in practice there will be infinitesimal gaps.

EDIT 2 (2013-11-05): I've since encountered variations of this bug quite often. Although the original poster's reduced test case presents a perfectly legitimate bug, most occurences have been in situations where there is already a 3D transform operating on the body (or similarly high up the DOM tree). This is often used as a hack to force GPU rendering, but will actually lead to nasty repaint issues like this. 2 no-op 3D transforms don't make a right: if you're using one higher up the tree, try removing it first before adding another one.

EDIT 3 (2014-12-19): Chris reports that translateZ(0) doesn't work in some cases where scale3d(1,1,1) does.

The key for Chrome is:

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

By adding this, the fixed position problem should be fixed.

It makes sense if you understand how Normal Flow of the document works. Let's say it's an edge case scenario.

There is no height declared in any element and #sidebar is taken OUT of the normal flow of the document by being position:fixed.

If you add a height property to #sidebar (pixels, not percentages) the problem is solved.

I would suggest including Normalize.css, I think it will take care of the bug.

ReferenceURL :