Jagged edges on transformed objects in firefox
When use tranform CSS3, the borders stay with jagged edges.
This link show how to bypass this.
http://tiffanybbrown.com/2013/04/13/smoothing-jagged-edges-on-transformed-objects-in-firefox
by Tiffany B. Brown (@webinista)
Written by Eduardo Matos
Related protips
3 Responses
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
·
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Firefox
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#