zoom property for css - Githubissues

karlcow commented 8 years ago

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:

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;

karlcow commented 8 years ago

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

foolip commented 8 years ago

Depressing usage statistics: https://www.chromestatus.com/metrics/feature/timeline/popularity/691

mleduque commented 8 years ago

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).

karlcow commented 8 years ago

@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.

mleduque commented 8 years ago

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

cvrebert commented 6 years ago

sideshowbarker commented 6 years ago

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.

karlcow commented 6 years ago

Thanks for the heads up @sideshowbarker

karlcow commented 6 years ago

The number of dependencies is growing but very slowly on https://bugzilla.mozilla.org/show_bug.cgi?id=390936

whatwg / compat

zoom property for css #41

Tokyo Metro

CircleSunkus

leftoversalad.tumblr.com