Support CSS zoom

[nuwan]

• It's so easy to support bigger screens like tvs and monitors with qhd/ uhd resolutions by adding custom zoom to the body than changing font size/ styles on each page elements. ex.

@media screen and (min-width: 1920px) {
    body {
        zoom:120%
    }
}

@media screen and (min-width: 2560px) {
    body {
        zoom:160%
    }
}

@media screen and (min-width: 3840px) {
    body {
        zoom: 180%
    }
}

• Other browsers already support this.  At least consider about add as `moz-zoom`, if you think any issue can cause to the websites using polyfills for zoom.

Thanks

[Jon]

Thanks for submitting an idea to the Mozilla Connect community! Your idea is now open to votes (aka kudos) and comments.

[Anonymous]

refs.

• - https://developer.mozilla.org/en-US/docs/Web/CSS/zoom
• - https://bugzilla.mozilla.org/show_bug.cgi?id=390936

[johnaweiss]

Firefox should support zoom. I expect to see Firefox support a feature that every other browser supports -- regardless of standards track.

https://developer.mozilla.org/en-US/docs/Web/CSS/zoom#browser_compatibility

This has been a bone of contention since about 2005. Enough is enough. Developers want it. Purists are against it for abstract purist reasons. 

https://bugzilla.mozilla.org/show_bug.cgi?id=390936 

mozilla.org states:

"The non-standard zoom CSS property can be used to control the magnification level of an element. transform: scale() should be used instead of this property, if possible. However, unlike CSS Transforms, zoom affects the layout size of the element."
https://developer.mozilla.org/en-US/docs/Web/CSS/zoom 

I think it’s not appropriate for you to recommend `transform:scale` – it’s a different functionality, different behavior.

There are known issues with `transform:scale`, to do with position and flow, with no easy workarounds. Particularly, subsequent element don't get repositioned to accomodate the transformed element. As your `zoom` article states:

"...unlike CSS Transforms, zoom affects the layout size of the element."

These aren't bugs, they are by design: transform isn't supposed to keep elements in the flow. Zoom is. transform:scale simply doesn't provide the same functionality as zoom. 

There are no simple workarounds to make transform:scale act like zoom. Positioning can be sort of fixed with `transform:origin 00`, but no easy fix for the flow issue. In 2022, developers shouldn't need workarounds anyway.

[Tester1to1]

When FF dies. it will starts to support zoom

[sonnycrokket]

CSS: zoom

It would be extremely beneficial if Firefox finally supported the 'zoom' formatting as well.

.test {

zoom:2;

}

[Jon]

(Note: similar ideas have been merged into this thread)