Исправлена ​​проблема с позиционированием привязок и списков UL в Google Chrome и Opera.

В этой статье рассматривается проблема с рендерингом, наблюдавшаяся в браузерах Google Chrome и Opera. где боковая панель с фиксированным положением может исчезнуть при нажатии на якорные ссылки на странице. Наличие элементов

на странице усугубляет эту проблему.

Решение Chrome

Применение свойства -webkit-transform:translateZ(0) к фиксированной боковой панели элемент решает эту проблему в Chrome. Этот метод использует разделение перерисовки и рендеринга CSS при использовании 3D-преобразований, уменьшая сбои при отображении.

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

Решение для Opera

Решение этой проблемы в Opera требует другого подхода. Мы используем анимацию @keyframes, чтобы принудительно перерисовывать свойство CSS, которое влияет на макет, но не оказывает практического влияния на внешний вид страницы. В данном случае мы анимируем свойство Margin-Bottom:

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

#sidebar {
    animation: noop 1s infinite;
}

Важно отметить, что это решение не является безупречным. В некоторых случаях может возникать кратковременное мерцание, когда боковая панель теряет свое положение и быстро перерисовывается. За эту проблему ответственно внутреннее поведение Opera между перерисовками.

Дополнительные соображения

Последующие случаи этой ошибки показали, что частые случаи, когда 3D-преобразование уже применяется к тело или родительский элемент. Эта практика, часто используемая для принудительного рендеринга с помощью графического процессора, может привести к постоянным проблемам с рендерингом. Прежде чем реализовывать предложенные выше решения, рассмотрите возможность удаления существующих 3D-преобразований.

Google Chrome и Opera теперь обрабатывают фиксированное позиционирование с повышенной стабильностью. Эти исправления продемонстрировали эффективность в решении проблем рендеринга, связанных с использованием элементов UL на странице.