4

I've done this in CSS.

image 2

It works great in Google Chrome after adding:

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;

But in FireFox it looks like this:

image 3

See source here

I tried several things and searched a lot. I don't know what to do to get rid of those borders FireFox creates. Most stuff I find is about transition, which I don't use. Any ideas would be very much welcome.

References:
- CSS3 transform rotate causing 1px shift in Chrome
- -webkit-transform rotate - Pixelated images in Chrome
- CSS transition effect makes image blurry / moves image 1px, in Chrome?

Community
  • 1
  • 1
Kev
  • 454
  • 6
  • 14

1 Answers1

9

Adding translateZ(1px) before the rotation rule seems to remove those artifacts:

transform: translateZ(1px) rotate(-45deg);

See this question.

Community
  • 1
  • 1
andreas
  • 16,357
  • 12
  • 72
  • 76
  • Hey Andreas, thanks for your help. It works great in Chrome, Firefox and Safari but I just found out that the bug still occurs in IE & Edge. If you have any idea it'd be very helpful. Thanks! – Kev Aug 29 '16 at 13:57
  • 1
    @Kev - I fixed this in IE by adding `background-clip: padding-box;` to the rotated element. – shrewdbeans Jan 05 '18 at 15:24