Хромированная медленная прокрутка с элементами фиксированного положения

Ответ 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);
};

Ответ 2

Первое решение @Corylulu работает, но не полностью (все еще немного заикается, но гораздо меньше). Я также должен был добавить -webkit-backface-visibility: hidden; к фиксированному элементу, чтобы он не был заикающимся.

Итак, для меня следующее работало как прелесть, чтобы предотвратить прокрутку вниз заикания в хроме при использовании фиксированных элементов на странице:

-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;

Изменить: Webkit-transform и webkit-backface-visibility также вызывают размытые шрифты и изображения. Поэтому убедитесь, что вы применяете оба параметра только в режиме наведения.

Ответ 3

Добавьте это правило в свой фиксированный элемент,

will-change: transform;

Читайте о решении от Здесь,
и читайте о изменении свойства из здесь.

Ответ 4

В недавнем отчете об этом особенно раздражающем вопросе: http://code.google.com/p/chromium/issues/detail?id=155313

Это связано с комбинацией плавающих элементов и больших изображений. Еще проблема в Chrome Canary 24.0.1310.0.

Ответ 5

Есть несколько способов ускорить этот интерфейс, попробуйте PageSpeed ​​Insights Chrome для некоторых идей. Лично я бы рекомендовал перестроить этот интерфейс с тем же дизайном поверх фреймворка, как Twitter Bootstrap, но если вы хотите, чтобы некоторые особенности этот передний конец:

• Как вы говорите, позиционирование вашей строки заголовка вызывает наибольшее время с точки зрения рендеринга CSS (результаты стресс-теста CSS). Избавьтесь от этого большого изображения, которое там, и замените его 1px широкоформатным фоном. Вы также произвольно изменяете размеры изображений, таких как ваш логотип (и любое другое изображение в этом заголовке), заменяете фактические версии
• Вы можете сэкономить много байтов, переданных оптимизацией всех ваших изображений содержимого.