Ответ 1
Проблема и как ее контролировать
Причина этого в том, что Chrome по некоторым причинам решает, что ему нужно перекодировать и изменять размеры любых изображений, когда над ним закрепляется фиксированная панель. Это особенно хорошо видно с
► Щелкните правой кнопкой мыши ➔ Проверить ➔ Временная шкала ➔ Нажать ⏺ Запись
► Вернитесь на страницу и перетащите полосу прокрутки вверх и вниз (прокрутка колесиком мыши не так эффективна)
Редактировать (01.09.2016). После публикации Chrome добавлены новые функции, помогающие отслеживать это:
► Правой кнопкой мыши ➔ Проверить ➔ Рендеринг (нижние вкладки)
➔ ☑ скроллинг проблемы производительности
➔ ☑ Paint Flashing
PS ☑ FPS Meter (менее важно, но может быть полезно)Это поможет вам точно определить, какие элементы требуют перекраски на свитках, и четко выделить их на экране.
Похоже, это просто проблема с методом, который использует Chrome, чтобы определить, нужно ли перекрашивать нижний элемент.
Что еще хуже, вы даже не можете обойти проблему, создав div над прокручиваемым div, чтобы избежать использования атрибута position:fixed. Это на самом деле вызовет тот же эффект. Chrome говорит, что если что-то на странице должно быть нарисовано поверх изображения (даже в iframe, div или чем-то еще), перекрасьте это изображение. Поэтому, несмотря на то, что div/frame вы прокручиваете, проблема сохраняется.
,
Простое решение для взлома
Но я нашел один хак, чтобы обойти эту проблему, которая, кажется, имеет несколько недостатков.
Добавляя следующее к фиксированным элементам
/* Edit (9/1/2016): Seems translate3d works better than translatez(0) on some devices */
-webkit-transform: translate3d(0, 0, 0);
Некоторые браузеры могут требовать этого, чтобы предотвратить мерцание
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
Это помещает фиксированный элемент в собственный слой композитинга и заставляет браузер использовать ускорение графического процессора.
РЕДАКТИРОВАТЬ: одна потенциальная проблема была указана мне albb; при использовании
transformвсе исходныеposition:fixedэлементы будут фиксироваться на этом слое композиции, а не на всей странице.
,
Альтернативное решение
В качестве альтернативы, вы можете просто скрыть верхнюю навигацию во время прокрутки и затем вернуть ее обратно. Вот пример, который может работать с заголовком fooobar.com/questions/147317/... или сайтом, подобным theverge.com, если он вставлен в DevTools> Console (или вручную введите " javascript: " в строку URL-адреса этой страницы, вставьте код ниже и нажмите Enter. ):
/* Inject some CSS to fix the header to the top and hide it
* when adding a 'header.hidden' class name. */
var css= document.createElement("style");
css.type = 'text/css';
css.innerHTML = 'header { transition: top .20s !important; }';
css.innerHTML += 'header.hideOnScroll { top: -55px !important; }';
css.innerHTML += 'header { top: 0 !important; position: fixed !important; }';
document.head.appendChild(css);
var header = document.querySelector("header");
var reinsertId = null; /* will be null if header is not hidden */
window.onscroll = function() {
if(!reinsertId) {
/* Hides header on scroll */
header.classList.add("hideOnScroll");
setTimeout(function() { header.style.visibility = "hidden"; }, 250);
} else {
/* Resets the re-insert timeout function */
clearTimeout(reinsertId);
}
/* Re-insert timeout function */
reinsertId = setTimeout(function(){
header.classList.remove("hideOnScroll");
header.style.visibility = "visible";
reinsertId = null;
}, 1500);
};