Inconsistent vh unit behaviour

Question

I have a pseudo element that appears on hover with:

height: 0.4vh;

The height doesn't change, only the width does. For some reason, however, under certain conditions the heights of different pseudo elements differ (both of the darker lines here have height: 0.4vh):

I put up this fiddle to demonstrate, but realise that it depends on the viewport height whether this weirdness happens: https://jsfiddle.net/vuw693La/

I am having this issue on Chromium and Firefox. Am I doing something wrong or is there no way to be "pixel perfect" with vh units?

Answer 1

There's some imprecision in browser renderings, especially when percentages or viewport units come into play. In this case, I'd consider whether it's actually worth it to make the height of those lines tied to the viewport. It seems limited to within a few pixels of variance for most screen sizes; maybe either set one size for it, or set static sizes at several breakpoints to gradually scale it up.

.icon_piece::after { height: 1px; }

// tweak breakpoints to whatever works best for your design
@media (min-height: 600px) { 
  icon_piece::after { height: 2px; } 
}

@media (min-height: 900px) {
  icon_piece::after { height: 3px; }
}