CODEWITHSUNDEEP
htmlcsssvg
Rebecca O'Riordan
Rebecca O'Riordan

Reputation: 883

CSS rotate causing pixels to render differently?

I have an svg icon that I rotate using the following CSS:

 .icon {
   border-style: solid;
   border-width: 2px 2px 0 0;
   content: '';
   display: inline-block;
   height: 0.4em;
   width: 0.4em;
   left: 0.2em;
   position: relative;
   top: 0.15em;
   -ms-transform: rotate(-45deg); /* IE 9 */
   -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
   -moz-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
   vertical-align: top;
}

The same icon is repeated but at times its pixels get sort of 'warped'.

Above is correct, below is warped.

Not sure what is happening here.

Upvotes: 0

Views: 62

Answers (1)

Ahs N
Ahs N

Reputation: 8386

Apply the following CSS to your icon:

-webkit-font-smoothing: antialiased;

Upvotes: 1

Related Questions