0

When you change page zoom in range 67% - 150% all thin lines on the page will be rendered differently depending on how browser decides to average a particular non-integer value.

Codepen: https://codepen.io/anon/pen/gewZYm

Is there a way to make all those 3 horizontal lines in the codepen to always get averaged down to 1px instead of 0px or 2px so they always look the same?

Code:

<div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
</div>

.line {
  height: 1px;
  margin: 40px;
  background-color: grey;
}
Un1
  • 3,874
  • 12
  • 37
  • 79
  • No, there isn't. You, as a developer, are only supposed to decide how a webpage looks at `100%`. You do not have the necessary tools to determine the zoom level cross-browser/cross-device. Therefore you do not have the possibility to control how it's rendered at different zoom levels. – tao Mar 17 '18 at 18:17
  • @AndreiGheorghiu You're wrong on this one, mate, please don't post incorrect information. Turns out there is a way to do it, see the answer below – Un1 Mar 17 '18 at 18:27
  • You're still at the whim of browsers. You don't have control. You can't say `1px` or `2px`. It's whatever browser manufacturers decide, it's not cross-browser/cross-device and it might not work tomorrow. Technically, I'm right, even if you found a solution that's acceptable for your use-case. I'm not talking only to you, i'm also talking to the thousands of future visitors of your question wanting to control this. And, unfortunately, I'm right. – tao Mar 17 '18 at 18:31
  • 1
    @AndreiGheorghiu well, you're correct that you don't have full control over it, but considering that most people use 1px borders and lines, this method would do it in most use cases – Un1 Mar 17 '18 at 18:33
  • You're trading *"pixel-perfect"* cross-device/cross-browser (which most clients and users expect) for *"pixel-perfect"* cross-zoom level (with limited values), which very few expect. `thin|medium|thin` are rendered differently in different browsers and devices. At this point I've already provided sufficient verifiable information. Whether or not you're prepared to accept it is not my problem, really. In short, my point is: I didn't post incorrect information. – tao Mar 17 '18 at 18:45
  • 1
    @AndreiGheorghiu Thanks for sharing your take on this. I'm not actually disagreeing, some of your points are valid, though it fixes the issue in Chrome and Firefox and falls back to the default "random average [0px - 2px]" in other browsers, so it's at least non-destructive – Un1 Mar 17 '18 at 18:49
  • Another possible duplicate: https://stackoverflow.com/questions/33769989/border-size-change-if-i-zoom-the-page – tao Mar 17 '18 at 19:04

1 Answers1

1

I just figured out how to do it.

If you need a thin line / border you have to use border-width: thin which would consistently be rendered as 1px:

To create a line:

border-style: solid;
border-width: thin 0 0 0;

To create a border:

border-style: solid;
border-width: thin;

You can also use medium and thick values (https://www.w3schools.com/cssref/pr_border-width.asp)

Updated codepen:

https://codepen.io/anon/pen/dmpwzp

Un1
  • 3,874
  • 12
  • 37
  • 79