Last Updated: February 25, 2016
· eduardojmatos

Jagged edges on transformed objects in firefox

When use tranform CSS3, the borders stay with jagged edges.

This link show how to bypass this.

by Tiffany B. Brown (@webinista)

3 Responses
Add your response

You could've posted it here. It's a one liner for FF and IE, two if you include support for WebKit Browsers:

transform: translate3d(0,0,0);

-webkit-transform: translate3d(0,0,0);

This is also good for hardware accelerating some animations or other content that uses CSS3 transforms. I usually create a class called force-acceleration with this fix and I add it to anything that's transformed or animated.

over 1 year ago ·

Well remembered :)

over 1 year ago ·

Just bear in mind that hardware accelerating on mobile can impact on battery life.

over 1 year ago ·