New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 168840 link

Starred by 35 users

Issue metadata

Status: Verified
Closed: Mar 2014
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Compat

Sign in to add a comment

viewport units (vh, vw, vmin) don't work in calc() declarations

Reported by, Jan 8 2013

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.101 Safari/537.11

Example URL:

Steps to reproduce the problem:
<body style="margin:0; padding:0;">
<div style="background:blue; height:100vh; height:calc(100vh - 100px);"></div>
2. See only blue

What is the expected behavior?
See 100px of white at the bottom

What went wrong?
the height:calc(100vh - 100px) rule was considered invalid

Does it occur on multiple sites: N/A

Is it a problem playing media? No

Is it a problem with a plugin? No 

Did this work before? No 

Does this work in other browsers? Yes IE 9, IE 10

Chrome version: 23.0.1271.101  Channel: stable
OS Version: OS X 10.8.2

calc() and viewport units are really cool, and make layout for web applications much easier. I really doubt I'm the only one who wants this to work.

Comment 1 by, Jan 9 2013

Labels: Area-WebKit WebKit-CSS
Status: Available
upstream bug: It looks like the original author of viewport units in WebKit is not coming back to fix this stuff.
Project Member

Comment 3 by, Mar 10 2013

Labels: -Area-Compat -Type-Bug -Area-WebKit -WebKit-CSS Cr-Content Type-Compat Cr-Content-CSS
 Issue 222688  has been merged into this issue.
Project Member

Comment 6 by, Apr 5 2013

Labels: -Cr-Content Cr-Blink
Project Member

Comment 7 by, Apr 6 2013

Labels: -Cr-Content-CSS Cr-Blink-CSS
In addition to IE9-11, this also works perfectly in FF.

Comment 9 by Deleted ...@, Aug 13 2013

This is a major issue that seems to be completely ignored?

vh/vx aren't updated on resize, and they don't work properly in calc() or -webkit-calc()

All of this works as expected in Firefox.  These have been known issues for over 9 months and the latest canary build of chrome still doesn't address them.
This technique is a great alternative to using the relatively verbose flexbox for low-complexity layouts.  I hope the issue can be resolved in the near future.
In Chrome 31 they seemed to have resolved the calc(100% - 100px) scenario, but it breaks in Chrome 30.

If you only create a viewport based layout, this will work if you set body to 100vh, and then use calc(100% - 100px) instead.

However, this has been broken since forever in webkit and I had hoped they would fix it correctly when forking blink, because it is super useful.
 Issue 262623  has been merged into this issue.
 Issue 328170  has been merged into this issue.

Comment 14 by, Jan 21 2014

I just threw together a polyfill to workaround this bug until it's fixed.

I only tested in Chrome with an inline stylesheet, but feel free to generalize it if you need to support other browsers/external stylesheets.

        var $$ = function (selector) {
            return Array.prototype.slice.apply(
        // Replace {vw, vh, vmin, vmax} values with equivalent px values in calc expressions
        // Workaround for 
        (function () {
            var vwInPX = window.innerWidth / 100;
            var vhInPX = window.innerHeight / 100;
            var vminInPX = Math.min(vwInPX, vhInPX);
            var vmaxInPX = Math.max(vwInPX, vhInPX);
                function (styleNode) {
                    styleNode.textContent = styleNode.textContent.replace(
                        function (rule) {
                            return rule.replace(
                                function (vwExp, vwValue) {
                                    return (parseFloat(vwValue) * vwInPX) + "px";
                        function (rule) {
                            return rule.replace(
                                function (vhExp, vhValue) {
                                    return (parseFloat(vhValue) * vhInPX) + "px";
                        function (rule) {
                            return rule.replace(
                                function (vminExp, vminValue) {
                                    return (parseFloat(vminValue) * vminInPX) + "px";
                        function (rule) {
                            return rule.replace(
                                function (vmaxExp, vmaxValue) {
                                    return (parseFloat(vmaxValue) * vmaxInPX) + "px";

Seems fixed in Chrome 34 Canary - see test
:fist pump:  Alright!
Confirm fix, please close.
Looks good on canary.
Status: Verified
Project Member

Comment 20 by, Apr 30 2014

Sign in to add a comment