compat
compat copied to clipboard
whatwg
zoom property for css
Zoom is implemented in IE, Edge, Blink and WebKit This is not implemented in Firefox.
- Bug 390936 - Implement Internet Explorer zoom property for css (Mozilla) https://bugzilla.mozilla.org/show_bug.cgi?id=390936
There is an intent to kill it from the CSS WG but they are looking for more details about it. See discussions about Zoom use cases:
- https://lists.w3.org/Archives/Public/www-style/2015May/thread.html#msg285
- https://lists.w3.org/Archives/Public/www-style/2016Feb/thread.html#msg63
The current Webcompat issues for Firefox.
Tokyo Metro
https://webcompat.com/issues/1118
if (userAgentCheck('iPhone', 'iPod', 'Android')) {
$(window).bind('resize load', function() {
$("html").css("zoom", $(window).width() / 640);
});
}
CircleSunkus
https://webcompat.com/issues/952
<html style="zoom: 0.5625;">
and
//viewport
$(window).bind('resize load', function
(){
$("html").css("zoom" , $(window).width()/640);
});
leftoversalad.tumblr.com
https://webcompat.com/issues/1551
var domain = document.domain,
photoset_id = '126724812097',
photoset = document.getElementById("photoset_126724812097"),
photoset_width = 700,
currentWidth;
function scale() {
var width = window.innerWith || Math.max(document.documentElement.clientWidth, document.body.clientWidth);
var scale = (width/photoset_width).toFixed(2);
var height;
if(currentWidth === undefined || currentWidth !== width) {
if(scale < 1) {
photoset.style.MozTransform = "scale("+(width/photoset_width).toFixed(2)+")";
photoset.style.zoom = (width/photoset_width).toFixed(2);
} else {
photoset.style.MozTransform = "scale(1)";
photoset.style.zoom = 1;
}
// send height to parent window
if(window.parent) {
height = (scale < 1) ? Math.round(photoset.offsetHeight*scale) : photoset.offsetHeight;
//TODO: Fix SSL requirement here
window.parent.postMessage('resize_photoset_iframe;'+photoset_id+';'+height, 'http://'+domain);
}
currentWidth = width;
}
}
scale();
window.onresize = scale;
Created a test case with an attempt at seeing what can be done to try to compensate for the zoom. http://codepen.io/anon/pen/obOJgd
Depressing usage statistics: https://www.chromestatus.com/metrics/feature/timeline/popularity/691
We have a non-public (private, not on the web) web application that relies on zoom with a value that is not 1. It can't be replaced by a transform/scale (CodeMirror doesn't support being draw inside transformed elements).
@mleduque could you create a reduced test case of what you are doing with zoom on codepen or similar. So we can have a better understanding why other solutions are not possible? Thanks.
Very quickly done: https://jsfiddle.net/zu3m8z94/14/
To see the problem, click on the top white zone (gives focus), type some text, see the cursor/caret is desynchronized with actual text insertion, horizontally and vertically (you must insert new lines to see vertical desynch). Click on the bottom one, the same thing doesn't happen. Obviously, doesn't work on Firefox.
There is some discussion here, https://github.com/codemirror/CodeMirror/issues/2443
FYI the W3C CSS checker (validator) now categorizes the zoom property as a “vendor extension” — which means that if a user has selected the option to treat “vendor extension” as warnings, a warning message (rather than an error) is emitted when zoom is encountered in a stylesheet.
The number of dependencies is growing but very slowly on https://bugzilla.mozilla.org/show_bug.cgi?id=390936