-webkit-min-device-pixel-ratio selector not changing on zoom event

[Charles Pritchard]

CSS Pixel metrics are changed when a user zooms in / out of a site:
window.matchMedia('(-webkit-min-device-pixel-ratio: 1)').matches
should change as a result, but does not.


Test (using Mozilla prefixes), from Robert O'Callahan on the whatwg lists:

<style>
div { display:none; }
@media screen and (min--moz-device-pixel-ratio: 1.5) {
  .in { display:block; }
}
@media screen and (max--moz-device-pixel-ratio: 0.66666666) {
  .out { display:block; }
}
</style>
<div class="in">Zoomed in by a factor of at least 1.5</div>
<div class="out">Zoomed out by a factor of at least 1.5</div>

[Charles Pritchard]

This works for Firefox 4, when using browser zoom:

// http://kb.mozillazine.org/Toolkit.zoomManager.zoomValues
#canvas.CompatibilityMozScreen { width: 1px; }
@media all and (min--moz-device-pixel-ratio: .3) {
 #canvas.CompatibilityMozScreen { width: .3px; }
}
@media all and (min--moz-device-pixel-ratio: .5) {
 #canvas.CompatibilityMozScreen { width: .5px; }
}
@media all and (min--moz-device-pixel-ratio: .67) {
 #canvas.CompatibilityMozScreen { width: .67px; }
}


This does not work in WebKit:
@media all and (-webkit-min-device-pixel-ratio: .8) {
 #canvas.CompatibilityMozScreen { width: .8px; }
}
@media all and (-webkit-min-device-pixel-ratio: 1) {
 #canvas.CompatibilityMozScreen { width: 1px; }
}
@media all and (-webkit-min-device-pixel-ratio: 2) {
 #canvas.CompatibilityMozScreen { width: 2px; }
}

Currently, in webkit, I must look at window.innerWidth / window.outerWidth
or some document.body metrics in comparison.

Microsoft simply exposes the values in window.screen.

WebKit only exposes window.devicePixelRatio as a value other than 1, on mobile distributions. I need the current 'zoom' of the user, so that I can show them crisp/clear renderings in <canvas> and use alternate image resources. This is an important issue for accessibility.

Mozilla has a different model for their window.*width mechanics than webkit. This split happened many years ago, and should not get-in-the-way of fixing the issue I'm bringing forward.

Mozilla does not expose a mutated devicePixelRatio directly, they require the CSS hack above to access the data. They do expose it directly to trusted scripts (browser extensions).

If there is a "consensus" standard, it's the CSS selectors. Otherwise, follow Microsoft's route, of simply putting the X dpi / Y dpi in the window.screen object. I don't see a need to create a third option.


-Charles

[Charles Pritchard]

Based on a thread on webkit-dev, it looks like implementing Microsoft's window.screen extensions is a decent route to take.

http://msdn.microsoft.com/en-us/library/ms535868(v=vs.85).aspx

[Radar WebKit Bug Importer]

<rdar://problem/69599721>

[Tim Guan-tin Chien [:timdream]]

Created attachment 409756 [details]
testcase.html

Alternative test case, zoom the page with Cmd++ and Cmd+- should print new logs. This works on Firefox and Chrome but not macOS.

[Tim Guan-tin Chien [:timdream]]

* This works on Firefox and Chrome but not Safari on macOS.

[Ahmad Saleem]

Created attachment 459870 [details]
Safari 15.5 not matching with other browsers

I am able to reproduce the bug using latest Safari 15.5 on macOS 12.4. Please refer to the attached screenshot for the bug across three browsers (i.e., Firefox Nightly, Chrome Canary and Safari).