1790140 - Pixel rounding error may cause css media queries to not apply, when the element's specified size should pass the media query (but is scaled+rounded due to zoom)

Status: NEW

(Core :: CSS Parsing and Computation, defect)

Description

[nonamefornow]

Attachment: my-default-zoom-is-on-90%.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:104.0) Gecko/20100101 Firefox/104.0

Steps to reproduce:

let's say you have a iframe that has 768px width and you have the CSS media query on
@media ( min-width: 768px ) {
//some code
}
the media query code won't work on iframe when you at 90% and 70% zoom on firefox

Actual results:

CSS media query is not working in iframe when i am in 90% or 70% zoom on firefox
P.S my default zoom is 90%

Expected results:

the should be consistent on all width

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::CSS Parsing and Computation' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Emilio Cobos Álvarez [:emilio]]

This is kind of expected. Zoom and HiDPI might make actual CSS pixels slightly different...

Comment 3

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:dholbert, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 4

[Jonathan Kew [:jfkthame]]

Could be related to floating-point inaccuracy in dealing with the scaled dimensions, but this does seem unfortunate: e.g. on a high-dpi (Mac retina) screen, with devicePixelRatio=2.0, and using a simple testcase

data:text/html,<style>@media(min-width:500px){div{background:red}}iframe{border:none}</style><div>test</div><iframe width=500 src="%23">

I see the red background within the iframe disappear at 80% or 90% zoom, and also at 110% and 133%. Yet querying the iframe's getClientRects(), it still reports a width of exactly 500px (not some fractionally-smaller approximation). So it is a bit surprising that the media query fails.

FWIW, I also see a failure in Chrome at 33% scaling, where it does report the width as 499.99px. But Firefox seems much more prone to this.