CODEWITHSUNDEEP
htmlcssheightzooming
Liu
Liu

Reputation: 61

Why do elements with the same height "look" differently when zoom changes?

Basically the gist is in the subject.

When I create two identical divs with fixed height (2px), and change the zoom to 75% or 125%, they "look" differently for some reason, can someone please explain what is going on here? And how do I fix this?

.gradient-slider-line {
    background: linear-gradient(to right, red , blue);
    height: 2px;
}
<div>
<div class="gradient-slider-line"></div>
</div>
<br/>
<div>
<div class="gradient-slider-line"></div>
</div>

Result:

Upvotes: 5

Views: 1078

Answers (2)

daniel-sc
daniel-sc

Reputation: 1307

This is indeed caused by browsers rounding of subpixel values and can be observed in current Chrome and Firefox. To fix this you should style the border and not the height - see:

.line {
  /* 12px leaves _no_ fractions for many zoom factors: */
  margin-top: 12px;
  width: 200px;
  box-sizing: border-box;
}

.group-height .line {
  /* 1px leaves fractions for many zoom factors: */
  height: 1px;
  background-color: black;
}

.group-border .line {
  border-top: 1px solid black;
}

.group-height {
  border-right: 10px solid green;
}
Check visual line apprearances with different browser/OS zoom!<br> Observe that styling with `height` (left side) leads to unexpected rounding effects, whereas `border` (right side) behaves as expected.
<div style="display: flex">
  <div class="group-height">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
  </div>
  <div class="group-border">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
  </div>
</div>

With 125% OS zoom this yields the following result: result image

Upvotes: 4

Liu
Liu

Reputation: 61

ok, some research helped but not a complete solution. As the last comment mentioned, it's a subpixel rendering issue, and it's influenced by your Anti Aliasing settings and windows display scaling setting. I switched to a 0.15 rem instead of 2px, which produced a similar line but the increments at which the line height jumps when zooming in/out are smaller and visually it's much less noticeable.

Upvotes: 1

Related Questions