<hr> tags render with different height

Question

I'm having a problem with some <hr> tags on my website.
reference image

As you can see in this very simple fiddle https://jsfiddle.net/bau1hp9L/ the <hr> tags do not all render in the same height.

the CSS for the <hr> is very simple, so no interference from other stuff...

hr {
  border: 0;
  height: 1px;
  background-color: #243588;
}

any ideas on why this is happening?

I want all the <hr>'s to have 1px height.

Some more information:

It is not always the same item that is shown bigger if i tweak the css inside the browser. e.g. I set height to 1px then to 0.5px then back etc.. - it now is a different <hr> tag that is displayed thicker (cant reproduce in jsfiddle unfortunately)

If I set the <hr>'s to height: 0.5px, now the <hr> that was too big is rendered with 1px height - as desired, but one of the other <hr>'s disappears randomly.

If i set height: 0.05em i get the desired 1px height for all of the <hr>'s but it seems a bit hacky to me... I dont really want to scale height depending on the font-size of the parent div. I want it to be 1px in height.

EDIT: Please try to resize your JSFiddle preview window vertically - you will then eventually experience this behaviour too.

Any guesses?

Answer 1

Try switching to "thin" instead of specifying a pixel height:

hr {
  border-top: thin solid #243588;
}

That fixes it for me, at all zoom levels. (Only tested in Chrome and Opera, so far, though.) It also feels more descriptive: I don't care how many pixels it is, I simply always want it to look like a thin line.

Found (in context of input boxes) here and they got it from https://productforums.google.com/forum/#!topic/chrome/r1neUxqo5Gc (appears it was a bug/feature introduced in Chrome 62, about 2 years ago).

Answer 2

Most likely you are zoom-scaling your webbrowser, and the 1px height sometimes gets scaled unevenly, i.e. on a 150% zoom, some of the pixels of your page will be duplicated, and some won't.

Reset your view zoom scale to 100%.