New issue
Advanced search Search tips

Issue 844565 link

Starred by 1 user

Issue metadata

Status: Duplicate
Merged: issue 843584
Owner: ----
Closed: May 2018
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 3
Type: Bug



Sign in to add a comment

Viewport units do not work properly in calc() in media queries.

Reported by jordan.s...@ssimwave.com, May 18 2018

Issue description

Chrome Version       : <66.0.3359.139 (Official Build) (64-bit)>
Other browsers tested:
    Firefox 60.0.1 (64-bit): OK

Example URL: https://jsfiddle.net/n444py9g/5/

What steps will reproduce the problem?
(1) Use viewport units inside a calc() in a media query.
 Ex: @media (max-width: calc(100vh + 100px))

What is the expected result?
The viewport units in the calc are taken into account and the media query computes its value correctly.

What happens instead?
The calc expression inside the media query ignores or incorrectly evaluates the viewport units.


In the provided fiddle the square should be green when width is less than the viewport height + 100px,
but instead only turns green when the width is less than 200px regardless of the viewport height.

Since viewport units work fine in regular calcs, it is frustrating to have them break in calcs inside media queries.
 

Comment 1 by cnardi@chromium.org, May 18 2018

Mergedinto: 843584
Status: Duplicate (was: Unconfirmed)
This is the same root issue as that of bug 843584.

Sign in to add a comment