Bug 51190 - -webkit-min-device-pixel-ratio selector not changing on zoom event
: -webkit-min-device-pixel-ratio selector not changing on zoom event
Status: UNCONFIRMED
: WebKit
CSS
: 528+ (Nightly build)
: PC Mac OS X 10.5
: P2 Normal
Assigned To:
:
:
:
:
  Show dependency treegraph
 
Reported: 2010-12-16 08:54 PST by
Modified: 2011-05-25 09:13 PST (History)


Attachments


Note

You need to log in before you can comment on or make changes to this bug.


Description From 2010-12-16 08:54:12 PST
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>
------- Comment #1 From 2011-03-25 10:01:58 PST -------
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
------- Comment #2 From 2011-05-19 09:16:41 PST -------
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