Stop blurring or jagged edges on CSS Transform Transition

Glenn Blog 0 Comments

If your content is blurred, jagged, or just looks terrible after a CSS Transform or Transition add the following CSS to the element that is affected:-


/* antialiasing */
outline: 1px solid transparent;
-webkit-backface-visibility: hidden;
translateZ(0);
will-change: transform;
-webkit-perspective: 1000;

The CSS will fix all manner of CSS display nastiness and ensure that the element is antialiased and not blurred or jagged. This means you can keep your pretty CSS effects.

About the Author
Stop blurring or jagged edges on CSS Transform Transition 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g

Glenn

A highly experienced WordPress Web Developer, Front-end and Back-end Developer & New Media Specialist with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries built up over a number of years.

Leave a Reply

Your email address will not be published. Required fields are marked *


*