Complete Styles for Cross Browser CSS Zoom

complete styles for cross browser CSS zoom

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 */
}

Cross-browser method of using the transform:scale css property?

I'm a little confused by your explanation. This fiddle in IE7-8 scales the inner elements down for me just fine with the first set of code you posted (though you indicate it was not scaling, only changing position). What that code does not do (and cannot do) is scale it from the center point (it is from the upper left), and the matrix transform cannot accommodate a translation (it only "Resizes, rotates, or reverses the content of the object"), so it is not "keeping the same center" as you indicate you desire.

There is a page I found similar to the transformie.js you noted in performing transform, but this other page speaks to the issue of the transform origin being centered. Ultimately, to get the appearance of being scaled on center, you must include a calculation of some kind to do a shift of the element using position: relative.

In this fiddle I've made it easy on myself to do such a calculation manually by setting a width on the wrapping div and knowing the height based on the inner sizes. This could get complicated with any dynamic sizing, but the link above I believe gives the calculations to do it dynamically using javascript (JQuery) with the sylvester.js as well.

How do I zoom out a whole website using jQuery or CSS?

CSS solution:

body {
    -moz-transform: scale(0.8, 0.8); /* Moz-browsers */
    zoom: 0.8; /* Other non-webkit browsers */
    zoom: 80%; /* Webkit browsers */
}

Supported on all major browsers http://caniuse.com/#feat=css-zoom

For Firefox, fallback is transform-scale http://caniuse.com/#feat=transforms2d

How can I zoom an HTML element in Firefox and Opera?

Try this code, this’ll work:

-moz-transform: scale(2);

You can refer to this.

Do we have to consider Browser Zoom when building a WebSite.?

In CSS there is something called "em". Different from pixels, they adjust themselves to screen settings. With most CSS elements, zooms should not be a problem, but if you are really having trouble, I would recommend using em as units

---

Related Topics