Inconsistent vh unit behaviour

问题

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?

回答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; }
}

回答2:

Some browsers have inconsistencies when using viewport units, specially smaller than 1vw or 1vh.

The way I solved this problem is by assigning larger units (multiplying them by 4 for example) and then using transform: scale(0.25); to get the element back to the desired size.

This is not a straightforward solution as you probably will have to rearrange your code to make it work but I couldn't find any other workaround.

来源：https://stackoverflow.com/questions/40322747/inconsistent-vh-unit-behaviour

标签

css

viewport-units