complete styles for cross browser CSS zoom

Question

I am finding it hard to get fully cross browser CSS zoom properties ..what I've is only these

zoom: 2;
-moz-transform: scale(2);

score 44 · Accepted Answer · edited May 23 '17 at 12:17

44

These will be sufficient for cross browser...

Demo

Note: As @martin pointed out that this may not work as intended, doesn't mean this fails, Chrome just makes it 2x larger than other browsers, because it RESPECTS zoom property as well. So it makes it 2x larger...

zoom: 2; /* IE */
-moz-transform: scale(2); /* Firefox */
-moz-transform-origin: 0 0;
-o-transform: scale(2); /* Opera */
-o-transform-origin: 0 0;
-webkit-transform: scale(2); /* Safari And Chrome */
-webkit-transform-origin: 0 0;
transform: scale(2); /* Standard Property */
transform-origin: 0 0;  /* Standard Property */

HTML

<div class="zoom">BlahBlah</div>

CSS

.zoom {
    zoom: 2;
    -moz-transform: scale(2);
    -moz-transform-origin: 0 0;
    -o-transform: scale(2);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(2);
    -webkit-transform-origin: 0 0;
    transform: scale(2); /* Standard Property */
    transform-origin: 0 0;  /* Standard Property */
}

edited May 23 '17 at 12:17

Community

1
1

answered Nov 15 '12 at 08:10

Mr. Alien

153,751
34
298
278

21

Unfortunately this will not work as expected. Modern Chrome will apply both the zoom and the scale making it 4x as large. [http://jsfiddle.net/X4XYf/148/](http://jsfiddle.net/X4XYf/148/) – martin May 09 '13 at 04:06
@martin Any webkit ports will actually do that. `zoom` was [introduced](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html) since Safari 4. – hexalys Jun 25 '14 at 00:31
1

Yeah, if you can ditch IE7 and below you may be able to get away with ditching zoom and using -ms-zoom vendor prefix (it is supported in IE8+ if memory serves). With the proliferation of Webkit, I would say it would be better to not provide zoom to some random browser with market share ~0.1% and support Webkit fully. – martin Jun 25 '14 at 05:19
1

you can also add -ms- – Jacek Pietal Jun 12 '15 at 13:53
1

Should have read the comments. Yup, Chrome will double it with the use of zoom and transform. – mummybot Jul 14 '15 at 14:20

aWebDeveloper · Answer 2 · 2014-05-06T03:43:46.070

Here is a css only solution

.csszoom{
        -ms-transform: scale(1.5); /* IE 9 */
        -ms-transform-origin: 0 0;
        -moz-transform: scale(1.5); /* Firefox */
        -moz-transform-origin: 0 0;
        -o-transform: scale(1.5); /* Opera */
        -o-transform-origin: 0 0;
        -webkit-transform: scale(1.5); /* Safari And Chrome */
        -webkit-transform-origin: 0 0;
        transform: scale(1.5); /* Standard Property */
        transform-origin: 0 0;  /* Standard Property */
}
.ie8 .csszoom{
        zoom:1.5;
}

Change HTML tag to

<!--[if lte IE 8]> <html class="ie8"> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

score 1 · Answer 3 · answered Sep 02 '13 at 11:38

If scripting is feasible then you can avoid both the collision of multiple supported zoom properties and the browser sniffing by using future-proof feature detection.
Note: I'm using jQuery here for convenience, but it could be written without it.

CSS:

.zoom {
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
}

HTML:

<div class="mySelectorClass">Foobar</div>

Script (One-Off Initialisation)

var strPropZoom = "zoom";
var blnPropZoomUseScale = false;

$(function() {
    var jqBody = $("body");

    // Determine the supported 'zoom' method
    switch (true) {
        case Boolean(jqBody.css("zoom"))              : break;
        case Boolean(jqBody.css("-moz-transform"))    : strPropNameZoom = "-moz-transform";    blnPropZoomUseScale = true; break;
        case Boolean(jqBody.css("-o-transform"))      : strPropNameZoom = "-o-transform";      blnPropZoomUseScale = true; break;
        case Boolean(jqBody.css("-webkit-transform")) : strPropNameZoom = "-webkit-transform"; blnPropZoomUseScale = true; break;
    }
})

Then when zooming is required simply invoke:

var intZoom = 2.5; // NB: This could be calculated depending on window dimensions
$(".mySelectorClass")
    .css(
        strPropZoom
        ,(blnPropZoomUseScale ? "scale(" + intZoom + ")" : intZoom)
    )
    .addClass("zoom");

score 0 · Answer 4 · edited May 23 '17 at 11:46

In response to the above comment by @martin (he is correct), I created a complicated workaround using javascript (includes some jQuery) and some of @Mr. Alien's css. Unquestionably, there are other ways to accomplish this - perhaps simpler, but, the following js and css combo works for me:

css

.zoom{
   -moz-transform: scale(2); /* Firefox */
   -moz-transform-origin: 0 0;
   -o-transform: scale(2); /* Opera */
   -o-transform-origin: 0 0;
   zoom:2 /*IE*/;
 }
//Notice the absence of any Webkit Transforms

javascript

(function($){
    var version=false,
    isSafari=Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0,
    isOpera=!!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0,
    isChrome=!!window.chrome && !isOpera;
    if(isChrome){
        version=(window.navigator.appVersion.match(/Chrome\/(\d+)\./)!==null) ?
        parseInt(window.navigator.appVersion.match(/Chrome\/(\d+)\./)[1], 10) :
        0;
        version=(version >= 10) ? true : false;
        // Don't know what version they switched it.  Figured that this was a good guess
    }
    // I added the extra ternary check in there because when testing in Chrome,
    // if I switched the user agent in the overrides section, it kept failing with 
    // null value for version.

    if(isSafari || version){
    $('.zoom').css('-webkit-transform','scale(2)');
    $('.zoom').css('-webkit-transform-origin','0 0');
        // If Scaling based upon different resolutions, a check could be included here
        // for window size, and the css could be adjusted accordingly.
    }
}(jQuery))

The browser detection code came from here and the Chrome version detection snippet came from this post.

I would tend to a pure css3 transform scale, and a special stylesheet targeting IE (with conditional comments). — Pierre, Aug 14 '13 at 12:57
Yeah...That would be easier. Not as clever, but certainly better. :) — dgo, Oct 08 '13 at 01:59

score -3 · Answer 5 · answered Apr 08 '15 at 20:31

-3

Seems like the answer today is

.zoom {
     zoom: 2; /* Chrome */
     transform: scale(2); /* FF, neglected by Chrome */
     transform-origin: 0;
}

That is a clinch. ;-)

answered Apr 08 '15 at 20:31

Leo

4,136
6
48
72

complete styles for cross browser CSS zoom

5 Answers5

CSS:

HTML:

Script (One-Off Initialisation)

Linked