Bug 141533 – min-width @media query with huge length incorrectly evaluates to true

• Status: RESOLVED
• Resolution: CONFIGURATION CHANGED
• Component: CSS

[Chris Rebert]

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.

[Chris Rebert]

Created attachment 252517 [details]
Copy of JS Fiddle example

[Chris Rebert]

Filed a Radar for this:
<rdar://problem/21886923>

[Chris Rebert]

A testcase for this has been added to the CSSWG test suite:
https://github.com/w3c/csswg-test/pull/788

[Chris Rebert]

Still broken in Safari Version 9.1 (11601.5.17.1).

[Chris Rebert]

Still broken in Tech Preview Release 13 (11603.1.5).

[Ahmad Saleem]

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!