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 :)
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
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Recent Announcements
Similar Threads
Was this page helpful?
