How to set zoom on a element using Javascript on Firefox?

Question

I can change a page element on Chrome using zoom

document.getElementById("pane-side").style.zoom = 0.5

Looks like Firefox did not support zoom, when i run the same code nothing happens.

Im searching for how to use zoom on Firefox, and i got this code:

document.getElementById("pane-side").style["-moz-transform"] = "scale(0.5)"

But the result was not what I expected:

Im trying to zoom out the element like on Chrome, any advice?

-EDIT- The element I'm trying to zoom in is from the page web.whatsapp.com, the panel where show some contacts when you type something in the search (like on the chrome photo).

you should add a class to your element with transform: scale(1.2); transform-origin: 0 0; as described in this question: https://stackoverflow.com/questions/1156278/how-can-i-scale-an-entire-web-page-with-css — Lety, Jan 12 '21 at 09:00

GBra 4.669 · Answer 1 · 2021-01-08T21:11:38.600

I hope you are not using this CSS property for a website in production, the property zoom is a non-standard CSS property, originated from IE, unofficially proposed in May 2015 by Rossen Atanassov working at Microsoft. It is unsafe to use since it will not work for every browser (and in my humble opinion, probably not going to be implemented). Unfortunately, this CSS property is not implemented in the Firefox Browser hence you are experiencing this issue.

I see that you already tried to use transform: scale(); instead, and the difference in your screenshot is due to the fact zoom affects the layout size of the elements, while transform: scale(); does not.

You could try with the CSS at-rule @viewport, but keep in mind that this one was deprecated too (in 2020, here are the details: https://github.com/w3c/csswg-drafts/issues/4766) and probably doesn't work in Firefox either. In your CSS file:

@viewport {
  zoom: 1
}

A zoom factor of 1 or 100% corresponds to no zooming. Larger values zoom in. Smaller values zoom out.

That being said, you could also try to set bigger the font size of the target element (to have a zoomed-in effect). If this is not enough, you could try to find a good balance between those properties. I'll do the CSS example that might scale up all the font sizes:

body {
   transform: scale(1.5);
   font-size: 150%; // or any other value that is bigger than the computed value
   padding: 20%; // optional spacing if some text is not visible because of the transform scale
}

score 0 · Answer 2 · answered Jan 06 '21 at 20:47

0

Does this works for you?

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

answered Jan 06 '21 at 20:47

JackyShows

191
1
10

im not sure about how to use it, I tried: `document.getElementById("pane-side").zoom = 0.5;` and did not changed anything, also `document.getElementById("pane-side").style["-moz-transform"] = "scale(0.5,0.5)"`does the same as on the picture I post – Jan 07 '21 at 00:03

score 0 · Answer 3 · answered Jan 06 '21 at 21:13

Both -moz-transform and transform should be supported in FF.

It could be because of the differences between zoom and scale.

zoom is applied pre-render and changes the layout sizing of the element. transform is applied post-render and doesn't change the layout sizing

The easiest way to see this is with a div sized relative to a fixed element. On zoom, everything inside the div will zoom in/out, but the div stays the same On scale, everything 'zooms' in/out, including the div

score 0 · Answer 4 · answered Jan 07 '21 at 06:08

0

You Can Use CSS Variables Try this

document.getElementById("pane-side").style.setProperty('--zoom', '0.5');

        
*{
    transform: scale(var(--zoom));
}

<h1 id="pane-side" >Firefox</h1>

answered Jan 07 '21 at 06:08

`document.getElementById("pane-side").style.setProperty('--zoom', '0.5');` return undefined, the other code I'm not sure how to use, I'm trying to change the zoom of an element of a page that's not mine – Jan 07 '21 at 22:23
You must add the css – Jan 08 '21 at 03:24
how do i add the css? – Jan 08 '21 at 04:43
`` add this code to between `` and `` – Jan 09 '21 at 09:18
i did it but i got the same result as using `document.getElementById("pane-side").style["-moz-transform"] = "scale(0.5)"`, the page I'm trying to zoom is web.whatsapp.com, the panel where show you contacts when you search one number. – Jan 10 '21 at 12:06
Then you can just press `ctrl` + `+` To zoom the webpage – Jan 10 '21 at 12:31
im trying to zoom the element `pane-side` of the page and `not` the whole page, look at the picture I post above, and compare the difference of the firefox/chrome zoom on the `pane-side element` – Jan 11 '21 at 00:05
did you try this code ? `document.getElementById("pane-side").style["width"] = "75%";` – Jan 11 '21 at 03:06

Beamer · Accepted Answer · 2021-01-11T06:41:10.407

zoom is not supported by FireFox.

Solutions below should work as you expect, only adjust numbers for your needs:

document.getElementById("pane-side").style.transform = "scale(0.5)";
document.getElementById("pane-side").style.transformOrigin = "left top";
document.getElementById("pane-side").style.width = "795px";
document.getElementById("pane-side").style.minHeight = "1700px";
document.getElementById("pane-side").style.alignSelf = "flex-start";

Or CSS version:

#pane-side {
    transform: scale(0.5);
    transform-origin: left top;
    width: 795px;
    min-height: 1700px;
    align-self: flex-start;
}

Or eventually <style> element added with JS:

var style = document.createElement('style');
style.innerHTML = `
    #pane-side {
        transform: scale(0.5);
        transform-origin: left top;
        width: 795px;
        min-height: 1700px;
        align-self: flex-start;
    }
`;
document.head.appendChild(style);

How to set zoom on a element using Javascript on Firefox?

5 Answers5