Circle dimensions set with rem and vmin squished at small sizes

user_12385207 0
Viewed 454

Problem

I am trying to set my root font-size to use vmin and px in a calc() function. When setting a circle div's height and width with rem, said circle is "squished" at small sizes (see photo and link below). When the div is inspected, the computed width and height are reported to be equal, despite its "squished" appearance.

Link to JSFiddle

Image of squished circle at small size bug

html {
  font-size: calc(10vmin + 1px);
}

.circle {
  height: 1rem;
  width: 1rem;
  background-color: blue;
  border-radius: 50%;
}
<html>
  <div class="circle"></div>
</html>

Troubleshooting

When the height and width are changed to a px value the issue is fixed. Additionally changing the root font-size to not use vmin, vh or vw to calculate the size also seems to fix the problem.

As pointed out by Aditya Sarin, changing the size of the div using vh or vw also fixes the error. It seems the only way to reproduce this error is by using calc() with a viewport unit and px value.

Question

Why does using calc() with a viewport unit seem to cause this error? Is it generally not considered wise to mix a viewport unit with a px value to create responsive rem sizes?

css html
2 Answers

I'm not sure whether this is an illusion, but having tried both the border-radius method given in the question and background-image radial-gradient (which gave worse results) I think using the filled circle Unicode character gives better results.

Whether the typeface chosen will alter things needs experimentation, as does whether anti aliasing settings make a difference. Here is a snippet with the border-radius and character methods so they can be compared. It is possible that a character will give a better result as typeface designers will understand how to smooth things as far as is possible. It may also be worth trying the larger Unicode filled circle and shrinking it.

html {
  font-size: calc(10vmin + 1px);
}

.circle {
  height: 1rem;
  width: 1rem;
  background-color: blue;
  border-radius: 50%;
}
<html>
  <div class="circle"></div>
  <div style="color:blue; font-size: 2.4rem;">&#9679;</div>
</html>

user_108674540

You can try to specify the dimensions using vh and vw

user_131871260
Related