1225071 - window.matchMedia is not working properly when several of them fire in quick succession.

Status: RESOLVED INVALID

(Core :: General, defect)

Description

[MJR]

Attachment: Bug.rtf

User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.86 Safari/537.36

Steps to reproduce:

function setup() {var w,x=1,y=[0,300,360,400,490,520,550,590,630,700,768,860,1010,1100,1230],z=y.length;for(;x<z;x++){w=window.matchMedia('(min-width:'+y[x]+'px)');w.addListener(event)}}

function event(e){eval('px'+e.media.replace(/\D/g,'')+'(e.matches)')}

This is the code that causes the problem. I use it to provide responsive web design instead of using CSS media queries. It works on all major browsers, except Firefox 41.0 on Windows 10. 

Open ieee-qld.org in Firefox and downsize the browser slowly until the row layout changes to column layout. Click on the full-size browser button and the browser resizes OK. Click on the same button again and the browser downsizes but doesn't render the content properly.


Actual results:

When stepping the browser quickly down from 1366 pixels wide to 768 pixels wide, the page content is displaced about 600 pixels to the right in the browser window. The attached file shows the results. 

Refreshing the browser brings the content into view.


Expected results:

The browser should have rendered the content properly, as it does in other browsers.

ieee-qld.org/awards.html has similar window.matchMedia code but a different HTML layout. It works properly in Firefox.

Comment 1

[MJR]

I upgraded to Firefox 42 and the problem disappeared.

Comment 2

[Firefox Bug Husbandry Bot]

Moving from Core::Untriaged to Core::General https://bugzilla.mozilla.org/show_bug.cgi?id=1407598