CODEWITHSUNDEEP
htmlcss
Sumit Raghav
Sumit Raghav

Reputation: 630

zoom css property is not working on firefox

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??

Upvotes: 17

Views: 37542

Answers (6)

HNOONa
HNOONa

Reputation: 63

The zoom CSS attribute is supported in Firefox starting from version 126 and above. I confirmed that it works. Also take a look at the caniuse page for zoom.

Upvotes: 2

Philip Rego
Philip Rego

Reputation: 648

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

Scale Image

File | Export As...

Upvotes: 0

Faz Ahmad
Faz Ahmad

Reputation: 57

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

Upvotes: -2

OJFord
OJFord

Reputation: 11130

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.

Upvotes: 1

ricardo
ricardo

Reputation: 1591

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)

Upvotes: 17

Karim Ali
Karim Ali

Reputation: 156

You can use:-

-moz-transform: scale(0.8);

in firefox as alternative..

Upvotes: 9

Related Questions