Problème de rafraîchissement de Chrome

Question

L'obtention d'une drôle de redessiner question dans google chrome:

Voir cassé le côté droit? C'est un div avec un fond d'img.

<div id="resultsSortFilter>
  ...
</div>

#resultsSortFilter {
float: left;
width: 712px;
height: 109px;
margin: 7px 0 0 8px;
background: url(../Images/search_sortfilter_bg.png) no-repeat;
}

• Pas de questions dans n'importe quel autre navigateur
• Qui se passe sur les versions plus récentes uniquement, nous avons bloqué la mise à jour pour empêcher cela cause des problèmes à l'interne.
• Semble être déclenchée par défilement en haut et en bas avant le rendu est terminé.
• Même des questions sur plusieurs sites

Quelqu'un d'autre a vu cela? Quelqu'un sait quelle est la cause ou ce que google Chrome l'intention de faire à ce sujet?

La version Chrome 26.0.1410.64 m

Mise à jour

Question est Windows et Mac OS. En fait, semble pire sur Mac.

Pourrait avoir épinglé vers le bas plus loin. Nous obtenons sur une page qui contient beaucoup d'images de grande taille. Vous vous demandez si elle a à voir avec la taille des données chrome a télécharger?

Cela semble faire de la question de s'en aller (ne va pas appeler ça un fix):

"Il se pourrait que la version la plus récente de Chrome tout simplement n'aime pas votre GPU. J'ai eu des problèmes similaires à la vôtre et ont résolu par désactivation de la composition et des fonctions d'accélération 3D.

Type chrome://flags dans la barre d'adresses et définissez les éléments suivants:

• Composition GPU sur toutes les pages: Désactivé (Trois options dans un menu déroulant.)
• Désactiver l'accélération 2D toile: Activer (Cliquez sur le lien qui dit que 'Activer', la boîte s'allumera en blanc.)
• Désactiver l'accélération CSS animations: Activer (Comme ci-dessus, l'élément s'allumera en blanc.)
• Puis cliquez sur le bouton qui s'affiche en bas de la page Relancer maintenant redémarrez google chrome et tester si cela a fonctionné."

À partir de http://askubuntu.com/questions/167140/google-chrome-with-strange-behavior

N'importe qui?

Mise à jour

Cette question semble d'disparu dans les versions ultérieures de Chrome.

Answer 1

Chrome devient de plus en plus gênant. Quelque chose qui vaille la peine d'essayer est de forcer l'accélération matérielle gpu sur l'élément.

Ajoutez ceci au CSS pour forcer l'accélération matérielle:

 -webkit-transform: translate3d(0, 0, 0);
 

Answer 2

J'ai eu des problèmes avec ce dans les navigateurs webkit, non seulement google Chrome. Je l'ai résolu en plaçant la règle suivante sur mon CSS:

html *:not(svg) {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0); /*only in IE10*/
}

Cela s'applique à l'accélération matérielle sur tous les éléments sauf pour svgs sur FF/IE/Safari/Chrome si la prise en charge.

Je ne suis pas d'appliquer la transformation sur les balises SVG puisque, pour une raison quelconque, cela a été la cause de mes svgs de ne pas s'afficher correctement, bizarrement l'appliquer à des éléments comme rect l'intérieur de la balise elle-même ne pose pas de problèmes.

Donc, essayez d'ajouter cette règle css et voir si cela résout votre problème.

Answer 3

J'ai eu ce genre de problème lors du basculement display:none; display:block;

Par exemple, avec jQuery.toggle()

L'élément en question était juste un wrapper pour le contenu, je voulais montrer et de cacher. C'est donc sa mère qui permettrait d'élargir ou de rétrécir à la verticale. Il devrait ressembler à ceci:

<div class="parent">
    <div class="child-to-toggle">
    </div>
</div>

d'enfant à bascule a pas de règles de style et, lorsqu'elle est cachée, une partie de la société mère n'était pas bien redessinées. (la partie inférieure)

Ensuite, j'ai ajouté une règle css pour enfant à bascule et le problème a été résolu. Il ressemble à l'ajout d'une règle css forcera certains redessiner dans ce cas.

En dépit de la accepté de répondre, je suis en ajoutant ce une raison activation de l'accélération matérielle sur mon ordinateur, Macbook pro, OSX Maverick, Chrome 36, serait complètement gâcher l'INTERFACE utilisateur avec des artefacts, j'ai donc dû trouver une autre façon.

L'ajout d'une règle css qui pourrait aider. Dans mon cas, j'ai ajouté une bordure-haut pour enfant à bascule.