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).

Answer 1

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);

Answer 2

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
}

Answer 3

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>

Answer 4

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

Answer 5

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;