Issue metadata
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.
|
|||||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||||
Comment 1 by cnardi@chromium.org
, May 18 2018Status: Duplicate (was: Unconfirmed)