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

Question

The zoom property is working in IE, Google Chrome and Safari, but it’s not working in Firefox and Opera.

Is there any method for adding this property to Firefox and Opera?

I'd refer you to [this question](http://stackoverflow.com/questions/1156278/css-how-to-scale-entire-web-page-with-css) which answers yours pretty thoroughly. — Ben, Oct 29 '10 at 07:11

score 80 · Accepted Answer · edited Oct 29 '10 at 10:16

80

Try this code, this’ll work:

-moz-transform: scale(2);

You can refer to this.

edited Oct 29 '10 at 10:16

Paul D. Waite

96,640
56
199
270

answered Oct 29 '10 at 07:07

Mubeen

2,426
9
30
30

2

Ya this is working perfectly. Is there is any method to change -moz-transform scaling factor to percentage – Oct 30 '10 at 04:43
It is a percentage in decimal form. (1 = 100% 2 = 200% 0.2 = 20%) But I believe you can use the percentage notation as well. http://www.w3.org/TR/css3-values/#percentages – sholsinger Nov 30 '11 at 02:27
56

The problem with this, is when you have fixed position elements. Zoom works in a different way than transform scale. – Tom Roggero Feb 14 '12 at 15:46
3

Also... what happens when ff supports zoom? Will this double zoom? This doesn't seem like the solution imo. – Cory Mawhorter May 11 '13 at 20:33
this doesnt work with a sprite image though where we actually need to zoom in on a specific part of the image. – colin rickels Apr 04 '18 at 13:37
Meanwhile in 2010. – Andrija Oct 21 '19 at 12:35

score 57 · Answer 2 · answered Dec 12 '12 at 19:49

Zoom and transform scale are not the same thing. They are applied at different times. Zoom is applied before the rendering happens, transform - after. The result of this is if you take a div with width/height = 100% nested inside of another div, with fixed size, if you apply zoom, everything inside your inner zoom will shrink, or grow, but if you apply transform your entire inner div will shrink (even though width/height is set to 100%, they are not going to be 100% after transformation).

Russ K. · Answer 3 · 2013-12-10T02:08:36.167

41

For me this works to counter the difference between zoom and scale transform, adjust for the intended origin desired:

zoom: 0.5;
-ms-zoom: 0.5;
-webkit-zoom: 0.5;
-moz-transform:  scale(0.5,0.5);
-moz-transform-origin: left center;

edited Dec 10 '13 at 02:08

answered Dec 09 '13 at 15:53

Russ K.

411
4
3

score 8 · Answer 4 · 2014-07-07T08:07:24.400

Use scale instead! After many researches and tests I have made this plugin to achieve it cross browser:

$.fn.scale = function(x) {
    if(!$(this).filter(':visible').length && x!=1)return $(this);
    if(!$(this).parent().hasClass('scaleContainer')){
        $(this).wrap($('<div class="scaleContainer">').css('position','relative'));
        $(this).data({
            'originalWidth':$(this).width(),
            'originalHeight':$(this).height()});
    }
    $(this).css({
        'transform': 'scale('+x+')',
        '-ms-transform': 'scale('+x+')',
        '-moz-transform': 'scale('+x+')',
        '-webkit-transform': 'scale('+x+')',
        'transform-origin': 'right bottom',
        '-ms-transform-origin': 'right bottom',
        '-moz-transform-origin': 'right bottom',
        '-webkit-transform-origin': 'right bottom',
        'position': 'absolute',
        'bottom': '0',
        'right': '0',
    });
    if(x==1)
        $(this).unwrap().css('position','static');else
            $(this).parent()
                .width($(this).data('originalWidth')*x)
                .height($(this).data('originalHeight')*x);
    return $(this);
};

usege:

$(selector).scale(0.5);

note:

It will create a wrapper with a class scaleContainer. Take care of that while styling content.

You can make this even more awesome by handling border width of the scaled element.. `.width($(this).data('originalWidth') * x + borderWidth)` — umutesen, May 23 '20 at 18:13

score 7 · Answer 5 · answered Aug 22 '16 at 17:37

7

I would change zoom for transform in all cases because, as explained by other answers, they are not equivalent. In my case it was also necessary to apply transform-origin property to place the items where I wanted.

This worked for me in Chome, Safari and Firefox:

transform: scale(0.4);
transform-origin: top left;
-moz-transform: scale(0.4);
-moz-transform-origin: top left;

answered Aug 22 '16 at 17:37

Alvaro

1,188
13
21

transform and -moz-transform are mutually exclusive. transform and transform-origin worked for me.Thanks! – JRichardsz Sep 05 '22 at 21:06
@JRichardsz Really? But Firefox supports transform. Why are both needed? https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale – johny why Oct 14 '22 at 17:41
mozilla 2022 105.0 (64-bit) https://i.ibb.co/YWZdwXJ/mozilla-scale.png if you use one, the other is ignored or disabled – JRichardsz Oct 14 '22 at 20:01

Divam Gupta · Answer 6 · 2015-06-18T20:14:16.180

4

zoom: 145%;
-moz-transform: scale(1.45);

use this to be on the safer side

edited Jun 18 '15 at 20:14

answered May 29 '12 at 08:19

Divam Gupta

228
4
6

11

This zooms 2x in webkit. Fist by zoom, second by scale – Ales Ruzicka Jun 28 '13 at 09:25

WtFudgE · Answer 7 · 2021-03-29T01:47:47.237

3

I've been swearing at this for a while. Zoom is definitely not the solution, it works in chrome, it works partially in IE but moves the entire html div, firefox doesnt do a thing.

My solution that worked for me was using both a scaling and a translation, and also adding the original height and weight and then setting the height and weight of the div itself:

#miniPreview {
transform: translate(-710px, -1000px) rotate(0rad) skewX(0rad) scale(0.3, 0.3);
transform-origin: 1010px 1429px 0px;
width: 337px;
height: 476px;

Obviously change these to your own needs. It gave me the same result in all browsers.

edited Mar 29 '21 at 01:47

answered Feb 29 '16 at 04:19

WtFudgE

5,080
7
47
59

2

This is the only correct answer! Scale alone leaves the original size of the element untouched. – Honza Zidek Jul 27 '20 at 13:10
This was the only answer that helped me solve my issue, which is that I wanted to scale elements up/down while maintaining the same width, so that more smaller elements would fit on the same row. All I had to do was scale the CSS width % as an inverse proportion to the CSS scale factor – Stu Blair May 27 '21 at 19:57

score 2 · Answer 8 · answered Jul 14 '17 at 19:06

Only correct and W3C compatible answer is: <html> object and rem. transformation doesn't work correctly if you scale down (for example scale(0.5).

Use:

html
{
   font-size: 1mm; /* or your favorite unit */
}

and use in your code "rem" unit (including styles for <body>) instead metric units. "%"s without changes. For all backgrounds set background-size. Define font-size for body, that is inherited by other elements.

if any condition occurs that shall fire zoom other than 1.0 change the font-size for tag (via CSS or JS).

for example:

@media screen and (max-width:320pt)
{
   html
   {
      font-size: 0.5mm; 
   }
}

This makes equivalent of zoom:0.5 without problems in JS with clientX and positioning during drag-drop events.

Don't use "rem" in media queries.

You really doesn't need zoom, but in some cases it can faster method for existing sites.

score 1 · Answer 9 · answered Apr 01 '19 at 11:51

try this code to zoom the whole page in fireFox

-moz-transform: scale(2);

if I am using this code, the whole page scaled with y and x scroll not properly zoom

so Sorry to say fireFox not working well using "-moz-transform: scale(2);"

**

Simply you can't zoom your page using css in fireFox

**

score 1 · Answer 10 · answered Feb 08 '12 at 16:18

It does not work in uniform way in all browsers. I went to to: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimage and added style for zoom and -moz-transform. I ran the same code on firefox, IE and chrome and got 3 different results.

<html>
<style>
body{zoom:3;-moz-transform: scale(3);}
</style>
<body>

<h2>Norwegian Mountain Trip</h2>
<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock"  />

</body>
</html>

score 0 · Answer 11 · answered Sep 27 '13 at 19:38

0

does this work correctly for you? :

zoom: 145%;
-moz-transform: scale(1.45);
-webkit-transform: scale(1.45);
scale(1.45);
transform: scale(1.45);

answered Sep 27 '13 at 19:38

T.Todua

53,146
19
236
237

score -1 · Answer 12 · answered Sep 29 '13 at 10:17

-1

For me this works well with IE10, Chrome, Firefox and Safari:

   #MyDiv>*
   {
        zoom: 50%;
        -moz-transform: scale(0.5);
        -webkit-transform: scale(1.0);
   }

This zooms all content in to 50%.

answered Sep 29 '13 at 10:17

Stone

1

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

12 Answers12

Linked