Власне в чому полягає проблема: якщо до “прибитого до екрану” елемента застосувати будь-який transform,
прибивання перестає функціонувати і працює точно як position: relative або position: static.
See the Pen Demonstration by Maks Lyashuk (@probil) on CodePen.
Цей ваді вже 5 років, вперше про її було сповіщено ще коли Хром був 4-ї версії. Доказ – rendering bug : position:fixed AND -webkit-transform. Але не треба винити в цьому Google. Вони тут взагалі ні при чому і готові виправити коли буде точно описано як себе має поводити браузер у цій ситуації. Тут конфлікт в самому стандарті і поки Пани, що їх пишуть, не розберуться між собою, його не поправлять.
Ну, а поки вони там вирішують, ми, прості смертні, маємо якось з тим жити. Власне є кілька варіантів виходу з ситуації.
1. Взагалі відмовитись від transform
Забути що такий існує і реалізувати ефекти перетворення блоків за допомогою SVG або статистичних зображень.
2. Обмежити застосування transform
Винести блок з position:fixed за межі застосування transform, а якщо цьому блоку також потрібний transform – створити ще один контейнер,
застосувати до нього transform, та кинути його (контейнер) в середину до position:fixed. Головне, щоб вище position:fixed не було жодного батьківського елемента з transform.
See the Pen Demonstration by Maks Lyashuk (@probil) on CodePen.
3. Не використовувати position:fixed
Цей метод полягає в реалізації ефекту, який забезпечує position:fixed за допомогою position:absolute. Спочатку пропишемо для “прикріпленого” елемента в css position:absolute.
Ну а js буде встановлювати позицію залежно від скролу.
$(window).scroll(function(){
$(".menu").css({'top':this.scrollY +'px'});
});Це виглядає так:
See the Pen Demonstration by Maks Lyashuk (@probil) on CodePen.
Єдина незручність тут така: якщо всі сценарії сторінки ще не завантажились, а користувач вже починає скролити – переміщення блоку відбувається таким ривками. Вихід – закинути сценарій у шапку, або показувати сторіку лише тоді, коли вона повністю завантажилась.