908568 - Responsive Design View incorrectly calculates documentElement.clientWidth until DOMContentLoaded fires

Status: RESOLVED WORKSFORME

(DevTools :: Responsive Design Mode, defect)

Description

[Matt Stow]

User Agent: Mozilla/5.0 (Windows NT 6.2; WOW64; rv:23.0) Gecko/20100101 Firefox/23.0 (Beta/Release)
Build ID: 20130814063812

Steps to reproduce:

When trying to test the viewport size, I noticed that in the new floating-scrollbar Responsive Design View, documentElement.clientWidth is miscalculated (thinking it has a scrollbar) until the DOMContentLoaded event fires.

Using the following code:

console.log('event, window.innerWidth, documentElement.clientWidth');
console.log('inline', window.innerWidth, document.documentElement.clientWidth);

document.onreadystatechange = function() {
	console.log('domready', document.readyState, window.innerWidth, document.documentElement.clientWidth);
};

document.addEventListener('DOMContentLoaded', function() {
	console.log('domcontentloaded', window.innerWidth, document.documentElement.clientWidth);
});

window.onload = function() {
	console.log('onload', window.innerWidth, document.documentElement.clientWidth);
};

Also available as a fiddle: http://fiddle.jshell.net/stowball/Jwyyg/show/light/ & http://jsfiddle.net/stowball/Jwyyg/


Actual results:

When in Responsive Design View, the console logs that window.innerWidth & document.documentElement.clientWidth are different until DOMContentLoaded, when they become the same.


Expected results:

Responsive Design View no longer has scrollbars, so the standard scrollbar width should never be taken in to account making document.documentElement.clientWidth === window.innerWidth - just as it does when not in RWD view.

I have a written a plugin called mqGenie (https://github.com/stowball/mqGenie) which normalises the viewport differences cross-browser, but this bug is making it break - as it's incorrectly changing media queries in RWD View when it shouldn't.

I'll have to run the plugin on DOMContentLoaded instead of immediately in the head if this bug persists.

Comment 1

[Matt Stow]

Attachment: Test case

Comment 2

[Hallvord R. M. Steen [:hallvors]]

I see this on http://fiddle.jshell.net/stowball/Jwyyg/show/light/ (check the console)

Comment 3

[Steffen Weber]

Firefox for Android 34 is affected by this bug, too. On my Nexus 5, document.documentElement.clientWidth initially has the value 980 but at some point changes to 360 (which is correct). The change does not happen on DOMContentLoaded or on load but later.

I've created a simple test-case: http://www.steffen185.de/files/firefox-clientwidth-bug.html

Notice that the viewport meta-tag is set to "width=device-width" and therefore it should be totally clear that clientWidth must contain "360".

Actual results:

Initial: 980
DOMContentLoaded: 980
Load: 980
Timeout 100 ms: 360
Timeout 1000 ms: 360

Expected results:

Initial: 360
DOMContentLoaded: 360
Load: 360
Timeout 100 ms: 360
Timeout 1000 ms: 360

Comment 4

[Steffen Weber]

This may be a duplicate of bug #1071620.

Comment 5

[Steffen Weber]

This bug seems to be fixed in Firefox for Android 41+.

Comment 6

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

It seems it is also fixed on desktop Firefox.  I checked Mac and Windows.  I don't think bug 1071620 would have fixed it on desktop too, so there was probably additional work somewhere else.  Anyway, it seems fixed.