Viewport units don't work in CSS calc()


SWFlash0

Recommended Posts

See this Chromium bug that was resolved this spring:

https://code.google.com/p/chromium/issues/detail?id=168840

Viewport units such as "vw" and "vh" can be used in CSS to set size of elements (width, height, border-width, etc), the same way px, em, and % do.

calc() can be used with those values if you need to express a value that consists from the mix of those units. So if you need a width that is 30 pixels smaller than 50% of the container, you could just do "width: calc(50% - 30px);". Viewport values have their uses as well, for example "20vw" always evaluates to 20% of the width of the document (not container) and can be used even in height of an element. However, these values don't return anything when you try to use calc() on them in Maxthon. Other browsers indeed do support it and it's even shown in one of examples in the W3C specification

You can test it here (check the red box in developer tools, it shows an error):

https://bug-94158-attachments.webkit.org/attachment.cgi?id=158661

Link to comment
Share on other sites