Mise à jour 2019
Le bogue d'affichage de Chrome n'est toujours pas résolu et, bien que ce ne soit pas la faute des clients, aucune des suggestions proposées dans l'intégralité de ce site Web n'aide à résoudre le problème. Je peux convenir que j'ai essayé chacun d'entre eux en vain: un seul se rapproche et c'est la règle css: filter: blur (0); qui élimine le décalage d'un conteneur de 1px mais ne résout pas le bogue d'affichage flou du conteneur lui-même et de tout contenu qu'il peut avoir.
Voici la réalité: il n'y a littéralement pas de solution à ce problème, voici donc une solution pour les sites Web fluides
CAS
Je développe actuellement un site Web fluide et j'ai 3 divs, tous centrés avec des effets de survol et partageant des valeurs de pourcentage à la fois en largeur et en position. Le bug Chrome se produit sur le conteneur central qui est réglé à gauche: 50%; et transformer: translateX (-50%); un cadre commun.
EXEMPLE: D'abord le HTML ...
<div id="box1" class="box">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div id="box2" class="box">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div id="box3" class="box">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
Voici le CSS où se produit le bogue Chrome ...
*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box; background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:50%; transform:translateX(-50%);} /* Bugged */
#box3 {right:5%;}
Voici le CSS corrigé ...
*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box; background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:37%;} /* Fixed */
#box3 {right:5%;}
Violon buggé: https://jsfiddle.net/m9bgrunx/2/
violon fixe: https://jsfiddle.net/uoc6e2dm/2/
Comme vous pouvez le voir, une petite quantité de modifications apportées au CSS devrait réduire ou éliminer la nécessité d'utiliser la transformation pour le positionnement. Cela pourrait également s'appliquer aux sites Web à largeur fixe ainsi qu'aux fluides.