Re: [csswg-drafts] [cssom-view] Add pageZoomFactor to window interface (#3538)

pageZoomfactor is usable on some situations yes. Like currently in our case - we want our content not be zoomed at all in any case, I can explain why if anyone interested.
It can currently extract like this :

  function browserZoom() {
   if ('deviceXDPI' in window.screen) {
    return window.screen.deviceXDPI / window.screen.systemXDPI;
   }
   // this works almost exactly also with Inspector open
   return Math.min(window.screen.width / window.innerWidth, window.screen.height / window.innerHeight);
  }

But CSS zoom is essential for us to render our content properly. What we do is we render iframes into webpages as guest and if and when that page has CSS zoom applied we absolutely
need to know that, because we need to apply the exact same zoom to our content inside the iframe. 

The easiest way is:

  var bodyZoom = +window.getComputedStyle(document.body).zoom || 1;
  var htmlZoom = +window.getComputedStyle(document.documentElement).zoom || 1;
  var totalCSSZoom = bodyZoom * htmlZoom;
  
Now I apply `totalCSSZoom` to iframe's `documentElement` and as a result iframe contents scale properly as expected.
This works on every browser except Chrome, as Chrome informs `window.getComputedStyle(document.documentElement).zoom` wrong. The default is `1`, but for example
on Windows and HiDPI i get `2`. And Chrome is wrong only on default. The same case, Winndows and HiDPI, but:

  html {
   zoom: 1;
  }

fixes that, now `window.getComputedStyle(document.documentElement).zoom` returns `1`, as expected. The rendering being exactly the same. The problem
is that knowing if there is zoom applied in some some `documentElement` class is hard and annoying.

Back to my case - currently Chrome would render on Windows our iframe content 2 times bigger as expected. Naturally I have a fix, 


  var oldCSS = doc.head.style.cssText;
  document.head.style.cssText = 'display: block;zoom:' + win.getComputedStyle(document.body).zoom;
  var totalCSSZoom = window.innerWidth / (document.head.clientWidth + window.innerWidth - document.documentElement.clientWidth);
  document.head.style.cssText = oldCSS;


but I would like to get correct values from `window.getComputedStyle()`

-- 
GitHub Notification of comment by atirip
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3538#issuecomment-460344501 using your GitHub account

Received on Monday, 4 February 2019 17:50:15 UTC