`MediaQueryList` `change` event handler runs in `Window` `resize` event handler when accessing `Element.client(Width|Height)`
Categories
(Core :: DOM: CSS Object Model, defect)
Tracking
()
People
(Reporter: daxpedda, Unassigned)
References
Details
User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/115.0
Steps to reproduce:
User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/115.0
Steps to reproduce:
Register a media query to watch for resolution.
Then access any Element.clientWidth inside the Window resize event.
Minimal example:
<!doctype html>
<html>
<head>
<title>Test</title>
<script type=module>
let mql = window.matchMedia('(resolution: ' + window.devicePixelRatio + 'dppx)');
mql.addEventListener('change', () => console.log('`MediaQueryList` `change` event fired'));
window.onresize = () => {
console.log('`onresize` begin');
console.log('`Element.clientWidth` access: ', document.getElementById('canvas').clientWidth);
console.log('`onresize` end');
};
</script>
</head>
<body><canvas id=canvas></canvas></body>
</html>
Actual results:
The media query change event handler will be executed while inside the Window resize event handler.
`onresize` begin
`MediaQueryList` `change` event fired
`Element.clientWidth` access: 300
`onresize` end
Expected results:
My understanding is that this shouldn't happen, events can't fire and run in parallel like this. Unfortunately I'm not familiar enough with the spec to find the exact paragraphs discussing how the event loops is supposed to be structured.
I expect the event handlers to not be run in parallel:
`onresize` begin
`Element.clientWidth` access: 300
`onresize` end
`MediaQueryList` `change` event fired
|
||
Comment 1•2 years ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::DOM: Core & HTML' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
|
||
Comment 2•2 years ago
|
||
Can reproduce. This only happens if the resolution of the window changes. I cannot reproduce this behaviour in Chrome though.
Edgar, you know more about synchronous and asynchronous events than me. Is this reasonable behaviour? Thanks!
|
||
Comment 3•2 years ago
|
||
Per spec, MediaQueryList change event should be fired when evaluating media queries and reporting changes
for a Document, which happens in https://html.spec.whatwg.org/multipage/webappapis.html#update-the-rendering step 9. But we also fire event on layout flushes, e.g. https://searchfox.org/mozilla-central/rev/7a642b487e4b93309285e2eb235f87a0d4b86518/dom/base/Element.cpp#256 in this case.
|
|
||
Comment 5•2 years ago
|
||
And there is a TODO comment in https://searchfox.org/mozilla-central/rev/7a642b487e4b93309285e2eb235f87a0d4b86518/layout/base/nsPresContext.cpp#1989-1990.
|
||
Comment 6•2 years ago
|
||
If you consider this as duplicate of bug 1451717, can you please mark it as duplicate? Thank you.
|
||
Comment 7•2 years ago
|
||
Yeah this is effectively bug 1451717. Bug 1834613 is also about this and was on my queue so let me rejigger the bugs here a bit.
Description
•