Jagged Edges on CSS Translated + Rotated Button
Background
Hi everyone, not sure how to fix this with CSS but it seems translated and rotated buttons still have a "jagged" edge which means there isnt any or enough anti-aliasing done.
Using edge/chromium (technically webview2 on windows)
Attempts to fix
I've tried following this stack overflow
https://stackoverflow.com/questions/6492027/css-transform-jagged-edges-in-chrome
and also searched for the issue in this discord which seems similar to what is in the stackoverflow post which was the transparent outline to force antialiasing.
Reproduction
https://play.tailwindcss.com/1EL2GoMiXi
Thanks again :)
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
9 Replies
you can't, that's how pixels work
you can try to add a box-shadow to the button, like this:
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.5);
by the way, don't remove the outline of buttonssurprised there isnt more aliasing going on then
(removed the outline-none from here)
with the suggested shadow
you can try to reduce the spread or play around with the shadow
but that's the best you will get
ok thank you
you're welcome
by the way, if you want, you can also try
translate3D(30px, 30px, 0px)
it helps a littlejust a little
ah ok thanks will take a look
you're welcome