Проблема с рендерингом 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 иногда начинает исчезать, когда я нажимаю ссылки привязки.

Что можно сделать, чтобы избежать такого поведения?

Ответы

Ответ 1

Решение Chrome:

Добавление -webkit-transform: translateZ(0) в #sidebar исправило проблему для меня.

Я использовал translateZ(0) для исправления многочисленных ошибок на экране Chrome за эти годы. Обоснование заключается в том, что, вызывая трехмерное преобразование, повторная краска отделяется от остальной части стека с помощью 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 между перерисовками - теоретически мой код делает перерисовку для элемент непрерывный, но на практике будут бесконечно малые пробелы.

РЕДАКТИРОВАТЬ 2 (2013-11-05) : С тех пор я часто сталкивался с вариациями этой ошибки. Хотя исходный плакат с уменьшенным сценарием представляет собой совершенно законную ошибку, большинство случаев происходило в ситуациях, когда на теле есть уже трехмерное преобразование (или аналогично высоко вверх по дереву DOM). Это часто используется в качестве взлома для принудительного рендеринга графического процессора, но на самом деле приведет к неприятным изменениям, например, таким образом. 2 3D-преобразования no-op не дают права: если вы используете один выше дерева, сначала попробуйте удалить его, прежде чем добавлять еще один.

РЕДАКТИРОВАТЬ 3 (2014-12-19) : Chris , что translateZ(0) не работает в некоторых случаях, когда scale3d(1,1,1) делает.

Ответ 2

Ключ для Chrome:

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

Добавив это, проблема фиксированной позиции должна быть исправлена.

Ответ 3

Это имеет смысл, если вы понимаете, как работает нормальный поток документа. Скажем, это сценарий краевого случая.

В любом элементе нет высоты, и #sidebar берется вне нормального потока документа, будучи position:fixed.

Если вы добавите свойство height в #sidebar (пиксели, а не проценты), проблема будет решена.

Я бы предложил включить Normalize.css, я думаю, что он позаботится об ошибке.