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

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

Источник

3 ответа

Решение

Решение Chrome:

Добавление -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 между перерисовками - в теории мой код делает перерисовку для элемента непрерывной, но на практике будут бесконечно малые пробелы.

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

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

Источник

Ключ для Chrome:

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

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

Источник

Это имеет смысл, если вы понимаете, как работает Normal Flow документа. Допустим, это крайний случай.

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

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

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

Источник
Другие вопросы по тегам