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

На моем у меня фиксированный DIV вверху, 3 фиксированных вкладки и фиксированный div внизу (это будет показано только при входе в систему - в будущем).

Я получаю плохую производительность прокрутки только на Chrome - FF и IE в порядке.

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

Любые идеи по исправлению?

Примечание: гораздо более заметно при увеличении хрома...

Обновление: я читал, что у других людей есть подобные проблемы, и обновил эту проблему Chrome, которая позже была объединена в 136555, предположительно исправлена ​​начиная с Chrome 26.

Источник

5 ответов

Проблема и как ее контролировать

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

► Щелкните правой кнопкой мыши ➔ Проверить ➔ Временная шкала ➔ Нажать ⏺ Запись

► Вернитесь на страницу и перетащите полосу прокрутки вверх и вниз (прокрутка колесиком мыши не так эффективна)

Редактировать (01.09.2016). После публикации Chrome добавлены новые функции, помогающие отслеживать это:

► Правой кнопкой мыши ➔ Проверить ➔ Рендеринг (нижние вкладки)

Performance ☑ Проблемы с прокруткой
☑ ☑ Краска мигает
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 элементы будут прикреплены к этому слою композиции, а не ко всей странице.

,

Альтернативное решение

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

//#network-bar refers to the fixed panel. This example works on TheVerge.com
//Note also that jQuery() can be replaced with $() in most instances.
var isHidden = false;
function topNavScroll() {
   $(window).scroll(function() {
    if(!isHidden){
        //Animate off the screen while scrolling
        $('#network-bar').animate({
            top: '-35px'
        }, 250, function() {
        //Make hidden to disable re-rendering
        $('#network-bar')[0].style.visibility = "hidden";});
        isHidden = true;
    }
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
        //Animate back on the screen when finished scrolling and make visible
        $('#network-bar')[0].style.visibility = "visible";
        $('#network-bar').animate({
        top: '0px'
      }, 250, function() {});
      isHidden = false;
    }, 1500));
});
}
Источник

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

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

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

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

Источник

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

will-change: transform;

Читайте о решении здесь,
и прочитайте о свойствах will-change здесь.

Источник

Недавно появилось сообщение об ошибке по этой особенно раздражающей проблеме: http://code.google.com/p/chromium/issues/detail?id=155313

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

Источник

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

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