1391888 - Device pixel ratios don't perfectly match zoom levels

Status: UNCONFIRMED

(Core :: CSS Parsing and Computation, defect, P3)

Description

[bjornson]

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

Steps to reproduce:

Look at the "resolution in dppx" and "resolution in dpi" attributes shown on this page at various zoom levels: http://mediaqueriestest.com/.


Actual results:

Zoom level / dppx / dpi
200% / 2dppx / 192dpi
170% / no support / no support
150% / 1.5dppx / 144dpi
133% / no support / 128dpi
120% / no support / no support
110% / no support / no support
100% / 1dppx / 96dpi
90% / no support / no support
80% / 0.8dppx / no support
67% / no support / no support
50% / no support / no support
30% / no support / no support


Expected results:

Should work at all zoom levels. (Chrome works at most levels; it fails below 67% only.)

Comment 1

[bjornson]

PS: MS Edge fails below 75% only, but works at all other zoom levels.

Comment 2

[bjornson]

Some corrections after looking at how http://mediaquerytest.com works:

* Firefox _does_ support dppx and dpi resolution queries at all zoom levels. However, the values are not very precise (maybe half-precision floats?) and/or aren't rounded before comparison:
  Zoom according to menu bar | window.devicePixelRatio
  200% | 2
  170% | 1.7142857313156128
  150% | 1.5
  130% | 1.3333333730697632
  120% | 1.2000000476837158
  110% | 1.0909091234207153 (Chrome: 1.100000023841858)
  100% | 1
   90% | 0.89552241563797 (Chrome: 0.8999999761581421)
   80% | 0.800000011920929
   67% | 0.6666666865348816 (Chrome: 0.6666666865348816)
   50% | 0.5
   30% | 0.30000001192092896

  This means it's necessary to use `(min-resolution: x-0.1) and (max-resolution: x+0.1)` to bracket these values for all zoom levels. mediaquerytest.com adds rules at 0.01 dppx increments, which is why it reports "no support" at many zoom levels.

  I only expected to have to bracket 67% and "130%" (which is actually 133%). Chrome and Edge match their stock zoom levels with one or two decimal digits (e.g. 110% matches 1.1, 125% matches 1.25). I can't find anything in the CSS3 media queries spec that says how floating point values should be compared, in order to say that FF's behavior is actually "wrong," but it's not as developer-friendly or consistent with Edge and Chrome.

* I had said that Chrome and Edge don't work below 67 and 75% zoom, respectively. They do work; but that test page just doesn't go down that far.

--> Possibly a wontfix but seems like situation could be improved.

Comment 3

[bjornson]

(Apologies for being noisy)

As far as how the resolution values should be compared, this probably explains what I was trying to say more clearly:

Chrome:
> window.devicePixelRatio
1.100000023841858 // nearest 32-bit float representation of 1.1
> window.matchMedia("(resolution: 1.100000000000000000dppx)").matches
true // query has more 0s than the nearest 64-bit float representation, 1.1000000000000000888
> window.matchMedia("(resolution: 1.1dppx)").matches
true

Firefox:
> window.devicePixelRatio
1.0909091234207153
> window.matchMedia("(resolution: 1.1dppx)").matches
false
> window.matchMedia("(resolution: 1.0909091234207153dppx)").matches
false // surprise. Truncating to any number of digits between the above and 1.0 does not work either
> window.matchMedia("(min-resolution: 1.09dppx) and (max-resolution: 1.1dppx)").matches
true // workaround

Comment 4

[Cameron McCormack (:heycam)]

Bug 1402942, which landed a few days ago, should resolve the precision issues with window.devicePixelRatio.  Bug 1376931, which will land soon, should solve the issues with matchMedia and dppx values.