web-dev-qa-db-fra.com

Puis-je faire quelque chose à propos de l'avertissement "repeindre sur le défilement" dans Chrome pour "overflow: scroll" div

Dans Chrome DevTools, sous Rendu, il y a une option pour "Afficher les goulots d'étranglement de défilement potentiels").

Lorsque j'ai activé cela, certains éléments div que j'ai à l'écran avec overflow:scroll montre un drapeau en haut disant "repeint sur défilement".

Je ne trouve pas beaucoup de documentation sur cette fonctionnalité, et je ne sais pas si c'est quelque chose que je peux réellement corriger ou améliorer, ou juste une déclaration de fait - les divs ont du contenu, et elles défilent.

javascriptcssgoogle-chromegoogle-chrome-devtools
44
user888734

Vous pouvez appliquer ce CSS sur le div avec overflow: scroll ou overflow: auto qui créent des goulots d'étranglement de défilement.

transform: translateZ(0);
-webkit-transform: translateZ(0);

Cela forcera le navigateur à créer un nouveau calque pour peindre cet élément et parfois à corriger les goulots d'étranglement du défilement (en particulier avec Webkit).

57
lepix

Bien que la réponse acceptée résout le problème, il vaut la peine de regarder la propriété CSS will-change . Cela est préférable à transform: translateZ(0); ces derniers temps. Voici un article qui explique la différence en détail - https://dev.opera.com/articles/css-will-change-property/

.scroll-container {
  will-change: transform;
}
22
msenni

Cela m'a étonnamment pris plusieurs jours pour suivre ce qui se passait, et uniquement parce que j'ai vu le commentaire d'un côté à la fin d'un rapport de bogue sur Chromium bugtracker Issue 5143 . Voici ce qui se passe et comment y remédier:

Il existe un concept appelé "texte LCD", qui signifie, je crois, un anticrénelage sous-pixel, c'est-à-dire "texte plus net et plus net". Malheureusement, cette fonctionnalité est incompatible avec le défilement accéléré par le compositeur.

Le texte LCD est activé par défaut (au moins sur Blink/Webkit?) Sur toutes les plates-formes qui ne sont pas à haute résolution (la plupart des moniteurs normaux; c'est-à-dire que vous pouvez vérifier console.log(devicePixelRatio)). D'un autre côté, LCD est désactivé par défaut sur les appareils à haute résolution (pensez à l'écran Retina ou à la plupart des appareils mobiles et tablettes) car vous n'avez pas vraiment besoin d'un "texte plus net et plus net"). fonctionnalité sur les plates-formes haute résolution.

Par conséquent, l'inverse est vrai pour le défilement accéléré par le compositeur: il n'est possible que sur une plate-forme à haute résolution où LCD est désactivé.

Cependant, vous pouvez forcer le défilement accéléré par le compositeur sur la plupart des moniteurs en promouvant l'élément overflow:scroll Sur son propre calque, en ajoutant will-change:transform À cet élément, ou tout équivalent hackish qui forcera l'élément de débordement pour être le parent de son propre calque (tel que transform:translateZ(0)). (Notez que les préfixes des fournisseurs sont supprimés.)

tl; dr: Chrome ne suppose pas à la fois l'anticrénelage sous-pixel ET le défilement assisté par GPU; choisissez l'un ou l'autre. L'anticrénelage sous-pixel est le choix par défaut sur Chrome (sauf sur les téléphones portables et les écrans rétine, car leur texte est si petit que vous n'avez pas besoin de la fonctionnalité, vous ne remarquerez donc pas ce problème sur ces plates-formes.) Remplacez-le en forçant l'élément dans son propre calque de compositeur avec will-change:transform (Mais notez que votre texte ne sera peut-être pas parfait).

16
ninjagecko