CSS: работа translate3d с fixed-позиционированными элементами

Быстрый ответ

Учтите, что при использовании transform3d в сочетании с position: fixed последний преобразуется в абсолютное позиционирование из-за изменений контейнера блоков. Чтобы обойти это, можно прямо применить преобразование к элементу с фиксированным позиционированием, либо переосмыслить структуру HTML для исключения вложения такого элемента в родительский с применённым преобразованием.

.fixedElement {
  transform: translate3d(0, 0, 0); /* Используйте 3D-преобразования осторожно */
}

Не забывайте важность z-index в организации визуальных слоёв — он помогает поддерживать порядок на странице.

Описание проблемы

Проблемы с position: fixed в преобразованной области возникают из-за создания локального координатного пространства, которое изменяет поведение таких элементов, опровергая наши ожидания.

Реструктуризация для решения проблемы

Чтобы дочерний элемент с position: fixed вел себя ожидаемо, нужно учитывать пространственные отношения и иерархию в процессе создания структуры страницы.

Подробнее об этом расскажет наш спикер на видео

Использование JavaScript

Если возможности HTML оказываются недостаточными, JavaScript сможет помочь, динамически корректируя положение элементов при прокрутке страницы.

$(window).on('scroll', function() {
  $('.fixedElement').css({
    top: $(window).scrollTop(),
    position: 'fixed'
  });
});

Всегда помните, что вмешательство в DOM допустимо лишь при наличии весомой причины, так как это может ухудшить производительность.

Использование position: sticky

Position: sticky – это компромисс между fixed и relative. Этот способ лучше совмещается с transform, но его поддержка в браузерах еще не идеальна.

Альтернативы позиционирования

Применение translate3d в контексте с position: fixed может обеспечить нужное позиционирование.

.fixedWrapper {
  position: fixed;
  transform: translate3d(var(--x), var(--y), var(--z));
}

.divInside {
  transform: translate3d(0, 0, 0);
}

Визуализация

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

Стабилизация движения элементов

Применение translateZ(0) помогает преодолеть проблемы с мерцанием и улучшить производительность отрисовки.

.fixedElement {
  transform: translateZ(0);
}

Мы всегда должны придерживаться принципов учета совместимости браузеров и, если требуется, использовать специальные префиксы, например -webkit-transform.

.fixedElement {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

Регулирование, управляемое событиями

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

window.addEventListener('scroll', function() {
  var yPos = Math.max(0, $(window).scrollTop());
  $('.fixedElement').css({
    top: yPos + 'px'
  });
});

Переструктуризация HTML: последний рубеж

В некоторых случаях для эффективного использования transform3d приходится проводить крупномасштабную реструктуризацию структуры HTML и стилей сайта.

Полезные материалы

1. Контекст наложения в CSS
2. CSS Transforms Module Level 1
3. Вопрос на Stack Overflow о 'transform3d' и 'position: fixed'
4. 163454 – Очистка клиента "BackForward"
5. Can I use... Поддержка HTML5, CSS3 и др.