Très difficile à résoudre et étrange problème de transition d'opacité en CSS3 (... doit être un bug?)

Question

Je suis absolument en train de m'arracher les cheveux avec ce problème CSS hautement frustrant et étrange que je suis en train de rencontrer.

J'utilise le squelette Bones pour créer un site web, et tout se passait bien, jusqu'à maintenant...

Il utilise un système de grille fluide et j'ai récemment essayé de créer une galerie simple que j'ai transformée en grille (4 images, chacune enveloppée dans un quart de colonne, avec des classes first/last ajoutées aux premières/dernières images).

Si vous survolez les images (surtout les trois premières pour une raison quelconque), vous remarquerez qu'elles changent de largeur d'un ou deux pixels pour une raison folle. Les images sont définies avec max-width:100%, et j'ai l'impression que c'est en quelque sorte le coupable, car si vous attribuez aux images une largeur "fixe" (exemple .gallery-icon img {max-width:165px;}, cela résout le problème, mais étant donné qu'il s'agit d'un système de grille fluide, je ne peux pas emprunter cette voie, car les images restent à 165px lorsque vous redimensionnez le navigateur, et même si je définis 4 largeurs différentes en fonction des médias, entre ces tailles de médias, les images ne s'alignent pas correctement.

Si ce n'était pas pour le problème de l'effet de transition (si je désactive la transition, les images baissent l'opacité correctement, mais sans animation), cela fonctionnerait comme je le souhaite :(

S'il vous plaît les gars, aidez-moi!

Voici un site de démonstration vide sur lequel le squelette Bones est utilisé et rien de plus que la galerie sur la page. Faites-moi savoir si vous rencontrez le problème de secousses.

(Je n'ai pas pu le recréer sur jsfiddle, donc je l'ai installé sur un vieux domaine que j'avais laissé trainer hehe)

EDIT: Je viens de remarquer que le problème semble se produire avec les images qui sont plus grandes que la div en largeur et en hauteur. Les images 1 + 3 ont ce problème, alors que les images 2,4 semblent correctes? et les images 2+4 ont une hauteur plus petite que la div..... Mais même si je définis une max-hauteur pour les images, le problème persiste..

EDIT2: Ajout d'une vidéo rapide pour montrer le problème (dernière version de Firefox et Chrome) http://www.youtube.com/watch?v=uL81hLfMvvw

Answer 1

Merci à vals d'avoir souligné l'aspect du GPU... Cela m'a rappelé ce snippet CSS qui tend à résoudre les problèmes de rendu dans Chrome:

-webkit-transform: translateZ(0);

J'ai appliqué ceci au conteneur (div.post) contenant l'élément problématique (i.icon-) qui a une largeur fractionnée, problème résolu!

Crédit: J'ai obtenu cette solution de cette réponse pour corriger les éléments incorrectement rendus (fixés) après avoir navigué vers une ancre de page.

Answer 2

Je dirais que c'est vraiment un bug dans Chrome (j'utilise la version 24.0.1312.57 m).

Le problème ne se situe pas vraiment sur les images 1 + 3, je l'ai vu sur l'image numéro 2.

Je pense que le problème survient lorsque vous avez la largeur de l'image en une fraction (disons 146,71 px). En affichage fixe, cela est arrondi à 146 px. En transition, cela est arrondi vers le haut (plus correctement !) à 147 px.

Answer 3

Utilisez l'indice CSS suivant pour promouvoir l'élément affecté vers une nouvelle couche composite (Cela a résolu exactement le même problème pour moi) :

. {
will-change: ;}
</code></pre>

<p>Cela indique au compositeur d'isoler le processus de peinture de l'élément dans une nouvelle couche composite. Lors de l'inspection des couches dans les outils de développement Chrome, vous pouvez vérifier que l'élément a été promu et donc que le problème est résolu. L'élément apparaîtra dans une nouvelle couche avec les raisons de composition suivantes : a une animation ou une transition accélérée active. A un indice de composition de type will-change.</p>

<p>Il semble qu'après avoir promu l'élément vers une nouvelle couche de cette manière, le navigateur est capable de rendre correctement l'état final de la transition.</p>

<p>Ivan.</p></x-turndown>

Answer 4

Sur ce lien, vous pouvez trouver la solution pour le bug de Mozilla.

Vous devez ajouter 1 règle CSS :

-moz-backface-visibility: hidden;

Answer 5

Je suggère d'utiliser jQuery pour gérer votre opacité plutôt que d'utiliser les attributs CSS3 car vous avez raison que votre max-width perturbe malheureusement vos transitions.

$(".gallery-icon img").hover(function(){
    $(this).fadeTo(fast, 0.7);
}, function(){
    $(this).fadeTo(fast, 1.0);
});

Utiliser jQuery résoudra bon nombre de ces petits problèmes avec les transitions et s'assurera que votre changement d'opacité est effectué de manière compatible avec tous les navigateurs (oui, je sais qu'il y a beaucoup de balises pour les transitions pour les navigateurs, mais il n'y a pas d'attributs pour tous les navigateurs.) :) J'espère que cela vous aidera!