CODEWITHSUNDEEP
cssgoogle-chromeviewport-units
user663031
user663031

Reputation:

"vw" CSS units in calc in Chrome not working

The new vw (and vh, vmin and vmax) CSS units are quite useful, as is calc. Both work fine in Chrome (the latter prefixed as -webkit-calc), but for some reason I've found that calc property values including the v* units, such as width: -webkit-calc(95vw - 25em) yield an invalid property value. Is this just not implemented yet, or the spec, or a bug?

Upvotes: 20

Views: 17182

Answers (2)

kevin
kevin

Reputation: 104

It's an old bug and has long been fixed, but if you're still supporting older versions of chrome, and specifically encountering this bug in an older version of chromium in an Android tablet you're supporting (as was my case), here's the simple way you can get around this bug:

Use a wrapper that spans the VW you're targeting, and then instead of using the viewport units in the calc(...), use 100%.

html:

<div class="container">
    <div class="inner-calc-with-viewport-units-bugged" />
</div>

css:

.container { 
    width: 100vw; //or height: 100vh, depending on your usecase
}
.inner-calc-with-viewport-units-bugged { 
    width: calc(100% - XXXXX px); //or height: calc(100% - XXpx);
}

Upvotes: 5

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201568

It’s a bug, registered as Bug 94158 - calc isn't working with viewport units.

Upvotes: 25

Related Questions