0

I am using rems across all my project to calculate both font sizes and elements dimentions. The base html font-size used to be set at 10px. When I changed to 11 for design reasons, I noticed that a repeated line of .2rem height was not displayed consistently. Here is a codepen that can reproduce the issue: https://codepen.io/jalef/pen/djeoxK . If the html font-size is changed from 10 to 11 the same thing happens.

html {
  font-size: 11px;
}

.line {
  height: .2rem;
  width: 50rem;
  background-color: purple;
  margin: 1rem;
}

The consistent .2rem height lines that are produced when html font-size is set to 10px: html font-size equal to 10px : consistent .2rem height line

The inconsistent .2rem height lines that are produced when html font-size is set to 11px: html font-size equal to 11px : inconsistent .2rem height line

Is there a reason why this is happening and is there a way to resolve it?

Thanks!

ealef
  • 534
  • 3
  • 11

1 Answers1

-1

It might be that there are some browser rendering issues.

You can try to use a border instead of the height of div.

Example:

border-bottom: 0.2rem solid purple;

enter image description here

Gifron
  • 96
  • 1
  • 8
  • Your border-bottom solution, has the same issues as the initial question, when you scale the font-size above 11px. I suppose it's an render issue, as you suggested. check : https://stackoverflow.com/questions/34676263/sub-pixels-calculated-and-rendered-differently-among-browsers – Thomas Scheffer Aug 02 '18 at 09:35
  • 20px on my screen looks good. Make sure to delete the background-color line. – Gifron Aug 02 '18 at 09:40
  • Any multiple of 5 results in a "good" line, as this would result in whole pixels. – Thomas Scheffer Aug 02 '18 at 09:43
  • So technically, you can go above 11px, just need to make sure it's a round number. – Gifron Aug 02 '18 at 09:45