[Webkit-unassigned] [Bug 123293] New: MediaQueryList listeners blocked by CSS media queries

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=123293

           Summary: MediaQueryList listeners blocked by CSS media queries
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: Macintosh
        OS/Version: Mac OS X 10.8
            Status: UNCONFIRMED
          Severity: Major
          Priority: P2
         Component: JavaScriptCore
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: andrewleung at sfu.ca


Created an attachment (id=215111)
 --> (https://bugs.webkit.org/attachment.cgi?id=215111&action=review)
A standalone HTML test page that illustrates the bug

# Overview

MediaQueryList listeners created using window.matchMedia and addListener() are blocked when certain CSS media queries are present.

# Steps to Reproduce

The standalone test page (attached) responds to changes to the media query "max-width: 768px", both in JS as a MediaQueryList and CSS as a media query.

1. Load the test page in a browser that is 768px wide.
2. Widen the browser by 1px, and observe the result.
3. Reload the page in place.
4. Narrow the browser by 1px, and observe the result.

# Actual Results

When the browser width goes from 768px to 769px, the answer was NO + YES. The counter incremented. When widening the browser by one extra pixel to 770px, the answer became YES + YES. The counter did not increment.

When the browser width goes from 769px to 768px, the answer was YES + NO. The counter incremented. When narrowing the browser by one extra pixel to 767px, the answer became NO + NO. The counter did not increment.

These results were obtained in these browsers:

* Safari 6.1 (8537.71) on OS X 10.8.5
* WebKit nightly build 538.4+
* MobileSafari on iPad running iOS 7.0.3

# Expected Results

When the browser width goes from 768px to 769px, the answer should be YES + YES. The counter should increment.

When the browser width goes from 769px to 768px, the answer should be NO + NO. The counter should increment.

# Additional Info

The actual results show that while the CSS media query immediately updated the page when the browser width crosses the threshold, the MediaQueryList listener did not, until the browser width changed by another pixel.

On the iPad, rotating between portrait and landscape orientations essentially changes the browser width between 768px and 1024px respectively. The same results were observed, except the browser width cannot be changed by another pixel to unblock the event/listener. In a way, this bug has a much larger impact on the iPad because of this.

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.