Sign in to follow this  
Followers 0
SWFlash0

Viewport units don't work in CSS calc()

2 posts in this topic

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

Share this post


Link to post
Share on other sites

Hi SWFlash0,

Thank you for pointing out this problem.

Actually the same problem exists in Chrome30...

Please wait until Chrome 37 core is released, we'll updated our core and fix the problem as well.:)

Stay tuned...

Thanks for your support of Maxthon

Have a nice time.

Share this post


Link to post
Share on other sites
Sign in to follow this  
Followers 0