Chrome redessiner problème

Je suis une drôle de redessiner question dans google chrome:

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

HTML

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

CSS

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

Aucun problème 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 Chrome a l'intention de faire à ce sujet?

Version de Chrome 26.0.1410.64 m

Mise à jour

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

Je pourrais avoir épinglé vers le bas plus loin. Nous obtenons le message d'erreur sur une page qui contient beaucoup d'images de grande taille. Je me demande 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 l'appeler un fixe):

"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 une liste déroulante.)

Désactiver l'accélération 2D toile: Activer (Cliquez sur le lien qui dit que
'Activer', la zone tour blanc).

Désactiver l'accélération CSS
animations: Activer (Comme ci-dessus, l'article tour 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é."

De https://askubuntu.com/questions/167140/google-chrome-with-strange-behavior

Mise à jour

Le problème semble avoir disparu dans les versions ultérieures de Chrome.

Quel est ton OS? Avez-vous vu ce problème sur d'autres systèmes d'exploitation?
Windows 7. Pas sûr à 100%. Va vérifier!
Realistiscally impossible pour nous de débogage ou d'analyser, sans un exemple de travail.
Je me souviens d'avoir quelques problèmes comme ça après j'ai fait des animations avec du contenu dans Google Chrome. Cette réponse montre comment la force d'un "redessiner" dans les navigateurs Webkit, qui a résolu mon problème.
Pas d'animations sur la page, c'est le contenu statique.
Avez-vous essayé la réponse donnée il y a? Il peut peut-être encore vous permet.
Je ne pense pas que c'est une solution pratique. J'aurais à exécuter javascript sur chaque image sur ma page!
Ce qui se passe lorsque vous exécutez le site incognito?
même problème.....:/
mmm, êtes-vous capable de partager un lien avec nous? 😀 Ou de créer quelque chose de similaires dans un violon?
non désolé, ne peut pas reproduire de violon et de sites derrière le pare-feu
Avez-vous de l'addon installé?
Salut. Je suis développeur web trop et je souffre de plusieurs repeindre questions sur Chrome depuis trop las semaines. Dans de nombreux cas, cela se produit lorsque le basculement display: none/block dans un élément, de sorte que la solution de contournement que j'ai trouvé, c'est de jouer avec le clip de la propriété. Mais les problèmes apparaissent dans beaucoup d'autres situations dans lesquelles je ne peux pas parvenir à une solution... 🙁
Yep, chrome est arriver buggier tous les jours
Un autre post: stackoverflow.com/questions/15152470/... - j'ai opté pour transform: scale3d(1,1,1);

InformationsquelleAutor Liam | 2013-05-02

google-chrome html

39

Chrome est arriver buggier. Quelque chose de la peine d'essayer de forcer l'accélération matérielle gpu sur l'élément.

Ajoutez à cela le CSS à la force de l'accélération matérielle:
```
-webkit-transform: translate3d(0, 0, 0);
```
- Désolé du retard dans l'obtention de retour. Il m'a fallu un certain temps pour obtenir un peu de temps pour examiner à nouveau cette question. Je ne sais pas si cela a résolu le problème. Une chose qu'il a fait faire est de briser tous mes Jquery UI modale des popups?! ceci s'applique le correctif proposé par @hoffmann aussi
- Cette travaillé pour résoudre mon redessiner question. Cela a également travaillé: -webkit-transform: scale3d(1,1,1); stackoverflow.com/questions/11002195/...
- si vous transformer sur le plan Z (3d) le scintillement semble résoudre de lui-même
- Je vous remercie. Il a aidé à éviter un étrange effet de zoom sur les images de l'survenant sur Chrome, mais pas Safari.
InformationsquelleAutor Aaron
10

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.
- Soyez prudent, car cela pourrait causer des navigateurs mobiles avec peu de RAM à l'écrasement.
- Cela transforme tout en une "couche composite". Si vous utilisez les outils de performance, vous allez voir comment cela ralentit votre navigateur.
InformationsquelleAutor Hoffmann
4

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>
```
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.
- Dans le cas du facteur de l'INTERFACE utilisateur, le redessiner question n'est pas quand nous étions basculement ou d'exploitation sur le DOM en aucune façon. C'était le cas lorsque le contenu à l'intérieur de l'élément a pris de l'expansion ou de contraction due à l'interaction de l'utilisateur. Pour que nous disposions de très peu de contrôle de déclenchement de CSS liées à des changements.
InformationsquelleAutor Kev

Vous devez vous connecter pour publier un commentaire.