Texte flou après l'utilisation de CSS transform : scale() ; dans Chrome

Question

Il semble qu'une récente mise à jour de Google Chrome rende le texte flou après avoir effectué un transform: scale() . Plus précisément, je fais ça :

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

Si vous visitez http://rourkery.com dans Chrome, vous devriez voir le problème sur la zone de texte principale. Ce n'était pas le cas auparavant et cela ne semble pas affecter les autres navigateurs webkit (comme Safari). Il y a eu d'autres messages concernant des personnes rencontrant un problème similaire avec les transformations 3D, mais je n'ai rien trouvé concernant les transformations 2D.

Toute idée serait appréciée, merci !

Answer 1

POUR CHORME :

J'ai essayé toutes les suggestions ici. Mais ça n'a pas marché. Mon collège a trouvé une excellente solution, qui fonctionne mieux :

Vous ne devez PAS passer à une échelle supérieure à 1.0

Et inclure translateZ(0) en position de survol mais PAS en position non survolée/initiale.

Exemple :

a {
    transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transform: scale(0.8, 0.8);
}

a:hover {
    transform: translateZ(0)scale(1.0, 1.0);
}

Answer 2

Dans la version 74.0.3729.169 de Chrome, mise à jour le 25 mai 2009, il ne semble pas y avoir de solution au problème de flou causé par la transformation à certains niveaux de zoom du navigateur. Même une simple TransformY(50px) rendra l'élément flou. Ce phénomène ne se produit pas dans les versions actuelles de Firefox, Edge ou Safari, et il ne semble pas se produire à tous les niveaux de zoom.

Answer 3

J'ai une division qui a un petit décalage de perspective sur elle pour donner un effet 3D subtil. Le texte de la division est flou et j'ai essayé toutes les suggestions ici, sans succès.

Curieusement, j'ai trouvé que le fait de définir le filtre "filter : inherit ;" sur les éléments de texte améliorait grandement la clarté. Mais je ne comprends pas pourquoi.

Voici mon code au cas où il serait utile :

Html :

<div id="NavContainer">
    <div id="Nav">
        <label>Title</label>
        <nav>
            <a href="http://stackoverflow.com/">home</a>
            <a href="http://stackoverflow.com/link1">link1</a>
            <a href="http://stackoverflow.com/link2">link2</a>
        </nav>
    </div>
</div>

Css :

    #NavContainer {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 20px;
        right: 20px;
        perspective: 80vw;
        perspective-origin: top center;
    }

    #Nav {
        text-align: right;
        transform: rotateX(-5deg);
    }

        #Nav > nav > a,
        #Nav > label {
            display: inline-block;
            filter: inherit;
        }

        #Nav > label {
            float: left;
            font-weight: bold;
        }

Answer 4

Pour moi le problème était que mes éléments utilisaient transformStyle: preserve-3d . Je me suis rendu compte que ce n'était pas vraiment nécessaire pour l'application et le fait de l'enlever a réglé le problème de flou.

Answer 5

Ce sera difficile à résoudre avec seulement du css.

J'ai donc résolu le problème avec Jquery.

C'est mon CSS.

.trY {
   top: 50%;
   transform: translateY(-50%);
}

.trX {
   left: 50%;
   transform: translateX(-50%);
}

.trXY {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

et voici mon jquery.

function tr_init() {
$(".trY, .trX, .trXY").each(function () {
    if ($(this).outerWidth() % 2 != 0) {
        var fixed_width = Math.ceil($(this).outerWidth() / 2) * 2;
        $(this).css("width", fixed_width);
    }
    if ($(this).outerHeight() % 2 != 0) {
        var fixed_height = Math.ceil($(this).outerHeight() / 2) * 2;
        $(this).css("height", fixed_height);
    }
})}