CODEWITHSUNDEEP
cssgoogle-chromecss-transforms
Quinox
Quinox

Reputation: 583

Slightly jagged edges in chrome (CSS transform)

I've some issues with a transform:rotate on Chrome (v54 / Windows 10) and others modern navigators I could test (Edge, Firefox... IE), actually. The edges of my div are a bit jagged, it's not as horrible as it was in Chrome's version of 2012 but it still not perfect.

I tried several tricks as

backface-visibility: hidden;
transform: translate3d( 0, 0, 0);
-webkit-transform-style: preserve-3d;

but none of them seems to completely work. The result is smoother than the initial one but still not fully satisfying.

Here's a link to my jsfiddle : https://jsfiddle.net/2szkvj70/1/

and a screenshot :

enter image description here

Am I a bit too exigent or is it possible to get the perfect no-aliased result ? :)

Thanks in advance !

Upvotes: 1

Views: 1282

Answers (1)

Jordan Soltman
Jordan Soltman

Reputation: 3903

You can fix this by adjusting your CSS slightly:

outline: 1px solid transparent;

instead of:

outline: 1px transparent;

https://jsfiddle.net/2szkvj70/2/ - This provides a comparison.

Upvotes: 1

Related Questions