Transformation 3D chrome aliasing

Bonsoir,

je suis confronté à un problème concernant chrome uniquement (pour une fois !).
J'ai fais une rotation 3d sur l'un des éléments de ma page (sur un état hover durant 1s).

Pendant que mon élément s'anime (au survol de la souris), l'ensemble du site est "aliasé", mes icones deviennent très moches, certains éléments sont décallés d'un pixel, bref c'est du n'importe quoi pendant 1s (durée de mon animation).

J'ai regardé sur différents forums et apparemment il s'agirait d'un problème -webkit- désactivant l'antialiasing lors d'une transformation 3d. Certaines solutions règlent ce problème :

* {
-webkit-transform: translate3d(0,0,0);
}

ou encore :

-webkit-backface-visibility: hidden,

Ces 2 lignes évitent le décalage d'un pixel mais mon soucis et que l'ensemble du site devient aliasé... (comme précédemment lors de l'état hover). Par conséquent cette solution ne me convient pas réellement .

Connaissez vous une astuce pour éviter ce genre de problème ?
Merci d'avance !

Jonathan

Bonsoir,

Une petite page de test en réserve ?
Sans garantie, il me semble me souvenir que ceci règle le soucis, mais je ne suis plus très sûr :

-webkit-transform-style: preserve-3d;

Bonsoir

Merci pour ta réponse, en effet cette syntaxe marche également mais provoque toujours l'aliasing désagréable sur l'ensemble de la page...

j'ai fais un petit screen d'une icone (via des icones font face) :


En haut le smiley net
En bas le smiley aliasé via les propriétés transform3d, preserve-3d, etc.

Ce n'est pas forcément flagrant sur ce screen, mais lors de l'exécution de mon animation 3d toutes les icones se décallent d'un pixel et sont plus grasses, plus aliasées pendant 1s
Modifié par psykhe (15 Feb 2014 - 20:28)

    -webkit-font-smoothing: antialiased;

?

Non, je l'avais testé celui la mais ça ne marche pas non plus

Mes dernières cartouches

-webkit-font-smoothing: subpixel-antialiased;

Peut-être de meilleurs résultats avec :

-webkit-text-stroke: 0.35px;

ou

text-shadow: 0 0 1px rgba(0, 0, 0, 0.01);

Après, il faut jeter Chrome qui va bientôt faire concurrence à un certain IE6

Je vais tester ça, mais j'avoue que c'est la 1ère fois que Chrome me pose problème !
En tout cas merci de m'avoir répondu !

Bonne soirée

Hello,

Le mieux, ce serait tout de même que tu fournisses une page en ligne, ou de test reproduisant le phénomène, que tu précises sous quel OS et quelle version tu rencontres ce problème.
Cela vient peut-être tout simplement de la police ou du package que tu utilises ?