Problem z renderowaniem Chrome. Kotwica o stałej pozycji z UL w korpusie

Jest problem z renderowaniem w Google Chrome i operze (dlaczego?= ) z takim kodem: 

<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>

Jak widzisz, staram się, aby pasek boczny był statyczny po prawej stronie. Wszystko działa dobrze, dopóki nie dodasz jakiegoś znacznika <UL> na stronie:

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

Naprawiony div czasami zaczyna znikać, gdy klikam linki anchor.

Co można zrobić, aby uniknąć takiego zachowania?

Author: Qix, 2013-03-01
Source

3 answers

Rozwiązanie Chrome:

Dodanie -webkit-transform: translateZ(0) do #sidebar naprawiło problem dla mnie.

Używałem translateZ(0) aby naprawić wiele błędów wyświetlania Chrome na przestrzeni lat. Uzasadnieniem jest to, że wywołując transformację 3D, re-paint jest oddzielony od reszty stosu CSS pain(nie mogę podać więcej szczegółów niż to, to prawie wszystko greckie dla mnie). W każdym razie, wydaje się działać dla mnie!

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

Rozwiązanie Opery:

Nie jest to rozwiązanie ogólne (trzeba będzie poprawione w zależności od wymagań pozycjonowania danego elementu). Działa poprzez wymuszanie ciągłych przemalowań (poprzez animację CSS) na właściwości, które mogą wpływać na układ (wymuszanie obliczania i renderowania innych czynników układu, tj. utrzymanie stałego pozycjonowania), ale w praktyce nie. W tym przypadku użyłem margin-bottom, ponieważ nie ma mowy, aby miało to wpływ na układ strony (ale Opera o tym nie wie!):

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

#sidebar {
    animation: noop 1s infinite;
}

Uwaga: rozwiązanie nie jest idealne, w tym (przynajmniej na moim komputerze) przypadki testowania błędów spowodują migotanie minut, ponieważ Opera traci pozycjonowanie i szybko przerysowuje. Niestety, myślę, że jest to tak dobre, jak można dostać, ponieważ jak George mówi w swojej odpowiedzi , jest to naturalne zachowanie Opery między przerysowaniami-w teorii mój kod robi przerysowania dla elementu ciągłego, ale w praktyce będą nieskończenie małe luki.

Edytuj 2 (2013-11-05): od tego czasu dość często spotykałem się z odmianami tego błędu. Chociaż zredukowany przypadek testowy oryginalnego plakatu przedstawia całkowicie uzasadniony błąd, większość zdarzeń miała miejsce w sytuacjach, w których na ciele działa już transformacja 3D (lub podobnie wysoko w drzewie DOM). Jest to często używane jako hack, Aby wymusić renderowanie GPU, ale w rzeczywistości doprowadzi do nieprzyjemnych problemów z odmalowaniem, takich jak ten. 2 NO-op 3D transforms don ' t make a right: jeśli używasz jednego wyżej w drzewie, spróbuj najpierw usunąć go przed dodaniem kolejnego.

Edycja 3 (2014-12-19): Chris raporty , że translateZ(0) nie działa w niektórych przypadkach, gdy scale3d(1,1,1) działa.

 168
Author: Barney,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:33:13

Klucz dla Chrome to: 

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

Dodając to, problem ze stałą pozycją powinien zostać naprawiony.

 14
Author: Corneliu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-03-04 14:34:09

Ma to sens, jeśli rozumiesz, jak działa normalny przepływ dokumentu. Załóżmy, że to skrajny scenariusz.

Nie ma zadeklarowanej wysokości w żadnym elemencie, a # sidebar jest usuwany z normalnego przepływu dokumentu przez position:fixed.

Jeśli dodasz właściwość height do #sidebar (piksele, nie procenty) problem zostanie rozwiązany.

Sugerowałbym normalizację.css, myślę, że zajmie się Bugiem.
 0
Author: George Katsanos,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-03-06 11:18:09