New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.
Starred by 35 users
Status: Verified
Owner:
Closed: Mar 2014
Cc:
Components:
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 thetalec...@gmail.com, Jan 8 2013 Back to list
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:
1.
<html>
<body style="margin:0; padding:0;">
<div style="background:blue; height:100vh; height:calc(100vh - 100px);"></div>
</body>
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 tkent@chromium.org, Jan 9 2013
Labels: Area-WebKit WebKit-CSS
Status: Available
upstream bug: https://bugs.webkit.org/show_bug.cgi?id=94158. It looks like the original author of viewport units in WebKit is not coming back to fix this stuff.
Project Member Comment 3 by bugdroid1@chromium.org, 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.
Owner: timloh@chromium.org
Project Member Comment 6 by bugdroid1@chromium.org, Apr 5 2013
Labels: -Cr-Content Cr-Blink
Project Member Comment 7 by bugdroid1@chromium.org, 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.
Cc: nyerramilli@chromium.org
 Issue 262623  has been merged into this issue.
Cc: agautam@chromium.org
 Issue 328170  has been merged into this issue.
Comment 14 by bsimp...@gmail.com, 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(
                document.querySelectorAll(
                    selector
                )
            );
        };
        
        // Replace {vw, vh, vmin, vmax} values with equivalent px values in calc expressions
        // Workaround for  http://crbug.com/168840 
        (function () {
            var vwInPX = window.innerWidth / 100;
            var vhInPX = window.innerHeight / 100;
            var vminInPX = Math.min(vwInPX, vhInPX);
            var vmaxInPX = Math.max(vwInPX, vhInPX);
            
            $$('style').forEach(
                function (styleNode) {
                    styleNode.textContent = styleNode.textContent.replace(
                        /calc\(.*?\d+\.?\d*vw.*\);/g,
                        function (rule) {
                            return rule.replace(
                                /(\d+\.?\d*)vw/g, 
                                function (vwExp, vwValue) {
                                    return (parseFloat(vwValue) * vwInPX) + "px";
                                }
                            );
                        }
                    ).replace(
                        /calc\(.*?\d+\.?\d*vh.*\);/g,
                        function (rule) {
                            return rule.replace(
                                /(\d+\.?\d*)vh/g, 
                                function (vhExp, vhValue) {
                                    return (parseFloat(vhValue) * vhInPX) + "px";
                                }
                            );
                        }
                    ).replace(
                        /calc\(.*?\d+\.?\d*vmin.*\);/g,
                        function (rule) {
                            return rule.replace(
                                /(\d+\.?\d*)vmin/g, 
                                function (vminExp, vminValue) {
                                    return (parseFloat(vminValue) * vminInPX) + "px";
                                }
                            );
                        }
                    ).replace(
                        /calc\(.*?\d+\.?\d*vmax.*\);/g,
                        function (rule) {
                            return rule.replace(
                                /(\d+\.?\d*)vmax/g, 
                                function (vmaxExp, vmaxValue) {
                                    return (parseFloat(vmaxValue) * vmaxInPX) + "px";
                                }
                            )
                        }
                    );
                }
            );
        })();            

Seems fixed in Chrome 34 Canary - see test http://codepen.io/thebabydino/pen/jpign
:fist pump:  Alright!
Confirm fix, please close.
Looks good on canary.
Status: Verified
Project Member Comment 20 by bugdroid1@chromium.org, Apr 30 2014
Sign in to add a comment