Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

zoom property for css #41

Open
karlcow opened this issue Feb 18, 2016 · 9 comments
Open

zoom property for css #41

karlcow opened this issue Feb 18, 2016 · 9 comments

Comments

@karlcow
Copy link
Member

karlcow commented Feb 18, 2016

Zoom is implemented in IE, Edge, Blink and WebKit
This is not implemented in Firefox.

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:

  1. https://lists.w3.org/Archives/Public/www-style/2015May/thread.html#msg285
  2. 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;
@karlcow
Copy link
Member Author

karlcow commented Feb 18, 2016

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
Copy link
Member

foolip commented Feb 18, 2016

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

@karlcow karlcow mentioned this issue Feb 18, 2016
Closed
@mleduque
Copy link

mleduque commented Sep 8, 2016

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
Copy link
Member Author

karlcow commented Sep 8, 2016

@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
Copy link

mleduque commented Sep 8, 2016 •
edited
Loading

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,
codemirror/codemirror5#2443

@karlcow karlcow mentioned this issue Nov 30, 2016
Open
@cvrebert
Copy link
Member

See also https://github.com/atanassov/css-zoom

@cvrebert cvrebert mentioned this issue Dec 31, 2017
Merged
@sideshowbarker
Copy link
Member

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
Copy link
Member Author

karlcow commented Jan 3, 2018

Thanks for the heads up @sideshowbarker

@karlcow
Copy link
Member Author

karlcow commented Jan 3, 2018

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

@karlcow karlcow mentioned this issue Sep 1, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@sideshowbarker @cvrebert @mleduque @foolip @karlcow