Bug 51190 - -webkit-min-device-pixel-ratio selector not changing on zoom event
Summary: -webkit-min-device-pixel-ratio selector not changing on zoom event
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: PC OS X 10.5
: P2 Normal
Assignee: Nobody
Depends on:
Reported: 2010-12-16 08:54 PST by Charles Pritchard
Modified: 2011-05-25 09:13 PDT (History)
4 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description Charles Pritchard 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:

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; }
<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 Charles Pritchard 2011-03-25 10:01:58 PDT
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.

Comment 2 Charles Pritchard 2011-05-19 09:16:41 PDT
Based on a thread on webkit-dev, it looks like implementing Microsoft's window.screen extensions is a decent route to take.