window.matchMedia('only all') inside iframe display:none to display:block
Categories
(Core :: DOM: CSS Object Model, defect, P3)
Tracking
()
People
(Reporter: rg, Unassigned)
References
(Blocks 1 open bug)
Details
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36
Steps to reproduce:
A page that does a window.matchMedia('only all').matches (mediaqueries) is loaded inside an iframe that starts with display:none and becomes display:block on iframe.onload (or after a setTimeout)
Doing a delayed window.matchMedia('only all').matches returns the correct value.
-- iframe.html --
<html>
<head>iframe page</head>
<iframe id="myframe" src="inside_page.html" height="200" width="300" style="border:2px solid black; display: none"></iframe>
<script>
const myiframe = document.getElementById('myframe');
myiframe.onload = () => {
myiframe.style.display = 'block';
};
</script>
<html>
-- inside_page.html --
<html>
<header>inside page</header>
<body>
<div>
<div id="instant"></div>
<input type="button" value="refresh" onclick="refresh('instant')" />
</div>
<br/>
<div id="delayed"></div>
</body>
<script>
function refresh(obj) {
document.getElementById(obj).innerHTML = obj + " = mediaquery matches: " + window.matchMedia('only all').matches;
};
refresh('instant');
setTimeout(function() { refresh("delayed"); }, 100);
</script>
</html>
Actual results:
Firefox (windows and mac v64 latest):
instant window.matchMedia('only all').matches == false
delayed window.matchMedia('only all').matches == true
Chrome (Windows and mac v71):
instant window.matchMedia('only all').matches == true
delayed window.matchMedia('only all').matches == true
By having the iframe start with display: hidden, Firefox works correctly.
Having it on body onload has the same effect as running it from the script directly (considered instant)
Using libraries like Modernizr that depend on the browser matchMedia will reveal the same behaviour.
Expected results:
instant window.matchMedia('only all').matches == true
delayed window.matchMedia('only all').matches == true
even with iframe starting with display: none
Sorry for the bad formatting above.
Since i can't edit it, please check below the formatted version
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36
Steps to reproduce:
A page that executes a window.matchMedia('only all').matches (mediaqueries) is loaded inside an iframe that starts with display:none and becomes display: block on iframe.onload (or after a setTimeout) makes the matchMedia return false
Doing a delayed window.matchMedia('only all').matches returns the correct value true.
iframe.html
<html>
<head>iframe page</head>
<iframe id="myframe" src="inside_page.html" height="200" width="300" style="border:2px solid black; display: none"></iframe>
<script>
const myiframe = document.getElementById('myframe');
myiframe.onload = () => {
myiframe.style.display = 'block';
};
</script>
<html>
inside_page.html
<html>
<header>inside page</header>
<body>
<div>
<div id="instant"></div>
<input type="button" value="refresh" onclick="refresh('instant')" />
</div>
<br/>
<div id="delayed"></div>
</body>
<script>
function refresh(obj) {
document.getElementById(obj).innerHTML = obj + " = mediaquery matches: " + window.matchMedia('only all').matches;
};
refresh('instant');
setTimeout(function() { refresh("delayed"); }, 100);
</script>
</html>
Actual results:
Firefox (windows and mac v64 latest):
instant: window.matchMedia('only all').matches == false
delayed: window.matchMedia('only all').matches == true
Chrome (Windows and mac v71):
instant: window.matchMedia('only all').matches == true
delayed: window.matchMedia('only all').matches == true
By having the iframe start with display: hidden, Firefox works correctly.
Having it on body onload has the same effect as running it from the script directly (considered instant)
Using libraries like Modernizr that depend on the browser matchMedia will reveal the same behaviour.
Expected results:
instant: window.matchMedia('only all').matches == true
delayed: window.matchMedia('only all').matches == true
even with an iframe starting with display: none
|
||
Updated•6 years ago
|
|
||
Comment 2•6 years ago
|
||
Yes, this is a known limitation unfortunately right now. I've been doing work on and off to remove it.
See bug 1490401 and related bugs. Thanks for the test-case! Bug 1430608 is where I did most of the work. It still requires quite a lot of moving bits around to completely fix it, since we need a media type for example.
See bug 548397 for other similar bits.
|
|
||
Comment 3•6 years ago
|
||
Let's track this in bug 1490401. I'll fix this there.
Description
•