zoom css property is not working on firefox

Question

I searched for this and found many solutions (using css3 transition).

Actually i am using {zoom:1.5} for all my buttons. But it is not working on firefox. when I use transition property like:

-moz-transform: scale(1.5); /* Firefox */
-moz-transform-origin: 0 0;

All my buttons are overlapping. See ok and cancel button. enter image description here

Is there any other alternative for this?? any help??

`zoom` isn't part of the css spec and is not supported in Firefox http://css-tricks.com/almanac/properties/z/zoom/ — Turnip, Oct 18 '13 at 12:25
thnx...I searched that already...isn't any alternative for this?? — Sumit Raghav, Oct 18 '13 at 12:28
You can use `scale`, but not on each of the buttons separately. Use it on the whole popup. — Mr Lister, Oct 18 '13 at 12:51
I m using it on my all buttons that I have in my application not on each buttons separately. — Sumit Raghav, Oct 18 '13 at 13:57
@SumitRaghav use this property on the outer div which holding these buttons. then they will overlap on each other — , Oct 18 '13 at 15:01
You are using zoom (or scale) on all the buttons on your website? Why? — Mr Lister, Oct 19 '13 at 07:28
dupe of http://stackoverflow.com/questions/4049342/how-can-i-zoom-a-div-in-firefox-and-opera — Michał Perłakowski, Feb 07 '16 at 09:39

score 17 · Answer 1 · answered Dec 08 '16 at 14:16

17

To scale 50% and keep top center:

transform: scale(0.5);
transform-origin: 50% 0;

This did work with Safari/Firefox/Chrome (I did not test with IE)

answered Dec 08 '16 at 14:16

ricardo

1,221
2
21
39

2

for anyone using it: please keep in mind that this affects the width of the element. Full-width elements will also scale, so if increasing the size, you will get a margin around your element. – GlabbichRulz Mar 15 '20 at 15:01
It still takes up the same space. All the margins say 0. How do you fix this? @GlabbichRulz – Philip Rego May 02 '20 at 20:45
1

unfortunately i did not yet find a proper zoom replacement for firefox – GlabbichRulz May 03 '20 at 10:35

score 8 · Answer 2 · answered Jan 19 '15 at 13:43

8

You can use:-

-moz-transform: scale(0.8);

in firefox as alternative..

answered Jan 19 '15 at 13:43

Karim Ali

146
1
7

It still takes up the same space, unlike zoom. – Philip Rego May 02 '20 at 20:47

score 0 · Answer 3 · answered Jun 30 '17 at 20:37

0

It was a combination of the existing answers that did it for me:

-moz-transform: scale(...);
-moz-transform-origin: 0 0;

With 50% 0 as ricardo's answer suggesst for the latter option there was a left margin.

answered Jun 30 '17 at 20:37

OJFord

10,522
8
64
98

It still takes up the same space, unlike zoom. – Philip Rego May 02 '20 at 20:48

Philip Rego · Answer 4 · 2020-05-02T21:21:24.293

0

What others have posted isn't feasible because the image will still take the same amount of space. Granted the image size doesn't need to resize programmatically, you can scale the image using Gimp, and remove zoom.

Image | Scale Image

File | Export As...

edited May 02 '20 at 21:21

answered May 02 '20 at 21:14

Philip Rego

552
4
20
35

score -2 · Answer 5 · answered Nov 20 '19 at 06:32

-2

put transform: scale(0.5); instead of zoom:0.5px, this will work. may be you have to change margins accordingly

answered Nov 20 '19 at 06:32

Faz Ahmad

57
3

1

How would you change the margins? Would effect how it looks in other browsers. – Philip Rego May 02 '20 at 20:50

zoom css property is not working on firefox

5 Answers5