Bug 141533 - min-width @media query with huge length incorrectly evaluates to true
Summary: min-width @media query with huge length incorrectly evaluates to true
Status: RESOLVED CONFIGURATION CHANGED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: WebKit Nightly Build
Hardware: Mac (Intel) OS X 10.11
: P2 Normal
Assignee: Nobody
URL: http://test.csswg.org/harness/test/me...
Keywords: HasReduction, InRadar, W3CTest
Depends on:
Blocks:
 
Reported: 2015-02-12 14:07 PST by Chris Rebert
Modified: 2022-08-30 02:19 PDT (History)
3 users (show)

See Also:


Attachments
Copy of JS Fiddle example (367 bytes, text/html)
2015-05-06 13:48 PDT, Chris Rebert
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Chris Rebert 2015-02-12 14:07:28 PST
Safari Version: 8.0.3 (10600.3.18)

Original Bootstrap issue: https://github.com/twbs/bootstrap/issues/13632

Example URL:
http://jsfiddle.net/Lc3vZ/

Steps to reproduce the problem:
1. Open http://jsfiddle.net/Lc3vZ/
2. Note that it contains the following CSS:
@media (min-width: 9999999999px) {
    body {
        background-color: red;
    }
}

What is the expected behavior?
The media query's condition should not be deemed satisfied since my monitor isn't several miles wide, and the background-color in the "Result" pane should thus remain at its default of white.

What went wrong?
The media query's condition somehow evaluated to true even though my viewport/screen is significantly less than 9999999999px wide. Thus, in the "Result" pane, the background is red.

Does this work in other browsers?
Yes. In OS X Firefox 29.0.1 and OS X Chrome 40.0.2214.111, the media query's condition correctly evaluates to false.
Chrome used to suffer from this same bug, but they've fixed it; see https://code.google.com/p/chromium/issues/detail?id=375574

More details:
Based on http://www.w3.org/TR/css3-values/#length-value , Safari's current behavior seems incorrect:
"In cases where the used length cannot be supported, user agents must approximate it in the actual value."
So Safari should be clamping it to some maximum value instead.
Comment 1 Chris Rebert 2015-05-06 13:48:12 PDT
Created attachment 252517 [details]
Copy of JS Fiddle example
Comment 2 Chris Rebert 2015-07-18 00:56:52 PDT
Filed a Radar for this:
<rdar://problem/21886923>
Comment 3 Chris Rebert 2015-08-28 23:31:37 PDT
A testcase for this has been added to the CSSWG test suite:
https://github.com/w3c/csswg-test/pull/788
Comment 4 Chris Rebert 2016-03-22 16:05:01 PDT
Still broken in Safari Version 9.1 (11601.5.17.1).
Comment 5 Chris Rebert 2016-09-17 23:11:31 PDT
Still broken in Tech Preview Release 13 (11603.1.5).
Comment 6 Ahmad Saleem 2022-08-30 02:19:50 PDT
I am not able to reproduce this bug in Safari 15.6.1 and Safari Technology Preview 152 and it does not turn background to red and all other browsers (Firefox Nightly 106 and Chrome Canary 107) are also same and does not turn the background to red.

It might be related to this:

https://github.com/WebKit/WebKit/commit/dad086a7dd9d4b8d46313d35e94881d4a56cf604

I am going to mark this as "RESOLVED CONFIGURATION CHANGED" but if someone can mark this as "DUPLICATE", if indeed above commit fixed this. Thanks!