Rotating border with radius in firefox, anti aliasing?

Question

.dice {
      margin: 4.5px auto;
      width: 40px;
      height: 34px;
      border: 1px solid black;
      border-radius: 9px;
      background-color: ghostwhite;
      transition: 900ms ease all;
      text-align: center;
      line-height: 10px;
      padding-top: 5px;
    }

<div class="dice">1</div>
<div class="dice" id="rotated" onclick="this.style.transform = 'rotate('+ (1*-90) +'deg)';">2</div>

I have this dice that I want to rotate 90 degrees (click '2'). It has a border radius that looks fine before the transform rotate but looks messy afterwards. Especially the curved edges are smudgy in FF after the transform.

Here's an image that should illustrate the issue, top left dice has jagged/anti-aliassed borders. image

[Appearntly embedding images is hard]

Here's an example, although it might be a bit hard to see: https://jsfiddle.net/39m2wqua/

I've read some posts about subpixel/halfpixel rendering, tried adding a shadow-box, or translateZ(1px) to the transform but nothing seems to fix this. Here's a similar thread: Anti-aliasing on rotated div with border image in firefox

Questions seeking code help must include the **shortest code** necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex) — Paulie_D, May 19 '20 at 12:06

score -1 · Answer 1 · answered May 19 '20 at 12:16

-1

I tested it myself (on Firefox), and it looks absolutely fine.
I recommend using a HD or vector image.

Otherwise, check this post. (It might help)

answered May 19 '20 at 12:16

Nanoo

836
8
16

Thank you for your reply! I'm not using images, just html/css to make the dice. What's a 'HD'? – Bartr May 19 '20 at 12:26
HD as in High Definition image (1000x1000 for example) – Nanoo May 19 '20 at 12:26
I would highly recommend using a vector image. It usually loads into the web page faster than an image, and it can be scaled up without losing any quality (which could help with the anti-aliasing). – Nanoo May 19 '20 at 12:28
CSS should be working fine though - i'm not sure what's causing the jagged edges. – Nanoo May 19 '20 at 12:29
Thanks for the input! (FYI, I didn't downvote your reply) I'll consider a vector image but would really like to see it work with just the CSS border and border-radius. Chrome has no issues but there don't seem to be many recent reports of a similar issue in FF... – Bartr May 19 '20 at 14:01
It might just be you then - perhaps you have an older version of FF? – Nanoo May 19 '20 at 14:16

Rotating border with radius in firefox, anti aliasing?

1 Answers1