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

Issue 328170 link

Starred by 1 user

Issue metadata

Status: Duplicate
Merged: issue 168840
Owner: ----
Closed: Dec 2013
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Compat

Sign in to add a comment

Can't use viewport units in calc() in CSS

Reported by, Dec 12 2013

Issue description

UserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/31.0.1650.63 Chrome/31.0.1650.63 Safari/537.36

Example URL:

Steps to reproduce the problem:
1. Use viewport units in calc(), such as left: calc(30vh + 15px)
2. Observe that it doesn't work.

What is the expected behavior?
It works. :)

What went wrong?
Viewport units seem to be being ignored in calc().

Does it occur on multiple sites: N/A

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? Yes Firefox 26.0 works

Chrome version: 31.0.1650.63  Channel: stable
OS Version: 
Flash Version: Shockwave Flash 11.2 r202

Simple reproduceable test case (copied from jsbin above):

<!DOCTYPE html>
<meta charset=utf-8 />
<title>JS Bin</title>
    p {
      position: absolute;
      background: yellow;
      padding: 5px;
      top: 50px;
      width: 150px;
      height: 150px;
      left: -webkit-calc(30vh + 1px);
      left: -moz-calc(30vh + 1px);
      left: calc(30vh + 1px);
  <p>I should be <code>left: calc(30vh + 1px);</code> from the left. But I am not, because you can't use viewport units in <code>calc</code>, in Chrome. :-(</p>
Labels: -OS-Linux OS-All Cr-Blink
Status: Untriaged
this issue is reproducible in all the channels and in all the OS, seems to be non regression issue.

Comment 2 by, Dec 17 2013

Labels: -Cr-Blink Cr-Blink-CSS

Comment 3 by, Dec 17 2013

Mergedinto: 168840
Status: Duplicate

Sign in to add a comment