В Chrome DevTools, под Rendering, есть опция "Показать потенциальные узкие места прокрутки".
Когда я включил это, некоторые элементы div, которые у меня есть на экране с overflow:scroll, показывают флаг наверху, говорящий "repaints on scroll".
Я не могу найти много документации по этой функции, и я не знаю, могу ли я ее исправить или улучшить, или просто утверждение факта - у div есть контент, и они действительно прокручивают.
Вы можете применить этот CSS к div с overflow: scroll или overflow: auto, которые создают узкие места прокрутки.
transform: translateZ(0);
-webkit-transform: translateZ(0);
Это заставит браузер создать новый слой для рисования этого элемента, а иногда и устранить узкие места прокрутки (особенно с помощью Webkit).
Хотя принятый ответ решает проблему, стоит посмотреть свойство CSS will-change. Это предпочтителен в течение transform: translateZ(0); в последнее время. Вот эта статья объясняет разницу в деталях - https://dev.opera.com/articles/css-will-change-property/
.scroll-container {
will-change: transform;
}
Это удивительно заняло несколько дней, чтобы отследить, что происходит, и только потому, что я увидел комментарий одной стороны в конце отчета об ошибке в Chromium bugtracker Issue 514303. Вот что происходит и как это исправить:
Существует понятие, называемое "ЖК-текст", которое, я считаю, означает подпиксельное сглаживание, т.е. "более четкий текст". К сожалению, эта функция несовместима с ускоренной скроллированием прокруткой.
ЖК-текст включен по умолчанию (по крайней мере, на Blink/Webkit?) на всех платформах, которые не являются высокодоходными (большинство обычных мониторов, т.е. вы можете проверить console.log(devicePixelRatio)). С другой стороны, текст ЖК-дисплея отключен по умолчанию на устройствах с высоким уровнем DPI (например, дисплей Retina или большинство мобильных устройств и планшетов), поскольку на платформах с высоким разрешением DPI действительно не нужна функция "более четкого текста".
Поэтому для ускорителя с ускорением с помощью ускорителя это верно: это возможно только на платформе с высоким разрешением, где ЖК-текст отключен.
Однако вы можете принудительно выполнить прокрутку на большинстве мониторов с помощью ускорителя, продвигая элемент overflow:scroll на свой собственный слой, добавив will-change:transform к этому элементу или любой хакерский эквивалент, который заставит элемент переполнения быть родительский собственный слой (например, transform:translateZ(0)). (Обратите внимание, что префиксы поставщиков удаляются.)
tl; dr: Chrome не допускает сглаживание подпикселей и прокрутку gpu; выбрать тот или другой. Подпиксельное сглаживание - это выбор по умолчанию в Chrome (за исключением дисплеев сотовых телефонов и сетчатки, потому что их текст настолько мал, что вам не нужна эта функция, поэтому вы не заметите эту проблему на этих платформах). Переопределите это, заставив элемент в свой собственный слой композитора с will-change:transform (но обратите внимание, что, возможно, ваш текст не будет выглядеть кристально идеальным).
Нет, вы не можете изменить это, это функция Chrome, которая позволит вам узнать, что написало каждое обновление в окне.
Обновления могут быть разными (прокрутка, mousemove, интервал, requestanimationframe,...).
Но теперь вы это знаете, вы можете улучшить свой код.
Если (я не знаю), браузер всегда перерисовывает div, если он настроен на прокрутку переполнения, возможно, вы можете сделать JS для установки на overflow hidden, когда вне экрана...
Этот пост говорит о разном макете браузера
В нижней панели инструментов hrome dev находятся 4 вкладки: консоль, поиск, эмуляция, рендеринг.
Выберите вкладку "Рендеринг", а затем отключите флажок "Показать узкие места прокрутки".