0

Google Chrome distorts links (all over the document) when translate3d is used. Why? Everything is fine in other web browsers.

https://jsfiddle.net/1jhynwsr/1

https://jsfiddle.net/1jhynwsr/1

<!DOCTYPE html>
<html>
<head>
<style>
  body {background-color:#0a0a0a;}
  a {color:#ff05fa;}
  a::before {
    background:orange;
    content:'';
    left:0;
    height:20px;
    width:10px;
    position:absolute;
    z-index:-1;
    transform: translate3d(-100%, 0, 0);
  }
  a:hover::before {transform: translate3d(0, 0, 0);}
</style>
</head>

<body>
  <a href="#">СсылкаЙЙЙЙЙЙЙЙЙЙЙ</a>
</body>
</html>
Alexander
  • 55
  • 7
  • Does this answer your question? [Webkit-based blurry/distorted text post-animation via translate3d](https://stackoverflow.com/questions/6411361/webkit-based-blurry-distorted-text-post-animation-via-translate3d) – pavel Nov 23 '21 at 06:39

0 Answers0