"vw" CSS units in calc in Chrome not working

css google-chrome viewport-units
user663031 picture user663031 · Jan 6, 2013 · Viewed 15.5k times · Source

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?

Answer

Jukka K. Korpela picture Jukka K. Korpela · Jan 6, 2013

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

Related questions

How to remove focus border (outline) around text/input boxes? (Chrome)

Can anyone explain how to remove the orange or blue border (outline) around text/input boxes? I think it only happens on Chrome to show that the input box is active. Here's the input CSS I'm using: input { background-color: transparent; …

Read More
Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More
Remove blue border from css custom-styled button in Chrome

I'm working on a web page, and I want custom-styled <button> tags. So with CSS, I said: border: none. Now it works perfectly in safari, but in chrome, when I click one of the buttons, it puts an …

Read More