0

I am setting the html font size to a viewport width unit. Then I am setting the height of a div with rem units. When you hit different viewport widths the height of the elements are not the same even though the rem unit is the same.

Example:

html{
  font-size: 1.3vw;
}

div{
  margin: 10px;
  width: 100px;
  height: 0.2rem;
  background: red;
}
<div></div>
<div></div>

If you resize the window in the above snippet you can see that the height of the div's vary when you resize window even though they should remain the same height. Why is this happening?

Steve K
  • 8,505
  • 2
  • 20
  • 35
  • 1
    sub-pixel rendring – Temani Afif Mar 06 '20 at 23:03
  • @TemaniAfif Care to explain – Steve K Mar 06 '20 at 23:05
  • https://stackoverflow.com/q/34676263/8620333 – Temani Afif Mar 06 '20 at 23:10
  • @TemaniAfif This doesn't explain why the browser would use different values for the exact same element with the exact same rem unit that has no wrapper constraints. If the browser has to round for a percentage of pixel shouldn't it round to the same number for each element? – Steve K Mar 06 '20 at 23:20
  • it's not the *same* element, they are two different elements having the same property and this doesn't mean they will for sure render the same. They aren't placed at the same position, will be painted in different order, etc. So they are more different than what you think which seems to be enough for the browser to render them differently. – Temani Afif Mar 06 '20 at 23:24

0 Answers0