CODEWITHSUNDEEP
cssviewport-units
vesperae
vesperae

Reputation: 1291

Viewport height / width returning decimal value?

Viewport height usually returns an integer value; however I am now noticing it returning a value with 2 decimal points.

Why / how do viewport units get rounded?

(Additionally, I am not resizing my browser window -- yet 100vh returns 616px sometimes, other times 616.36px)

Upvotes: 1

Views: 3972

Answers (1)

Fenton
Fenton

Reputation: 250892

The specification merely prescribes that 1 unit of vw is:

1% of viewport’s width

This ought to be reasonably precise, as 100 of these units should fill the entire width, so rounding will cause problems here.

The CSS definition of number includes integers and decimals see v2 or v3.

In the cases of the browsers that return an integer, if the view port is not coincidentally exactly divisible by 100, and if the result of 1vw * 100 is significantly off - it is worth raising a bug with the browser vendor.

Result of browser test... note that size difference is down to browser chuff and tool size.

Firefox seems to reliably calculate to 4dp:

height: 3.06667px;
width: 6.76667px;

An old version of IE I have lying around similarly reliable, but to 2dp:

height: 3.78px;
width: 6.76px

How are you obtaining your numbers?

Upvotes: 3

Related Questions