How to simulating css zoom in firefox? - html

Question

I use this code for a menu in my site but now testing it cross-browser I see there is not compatible with firefox.
li {
display: inline-block;
list-style: none inside none;
text-align: center;
}
li a:before {
content:"";
display: block;
border-radius: 50%;
width: 62px;
height: 62px;
background: #F00;
margin: 0 auto 14px;
transition: all .2s;
}
ul.small li a:before {
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
-o-transform: scale(0.7);
background: blue;
}
ul.small-zoom li a:before {
zoom: 0.7;
background: green;
}
As you can see in this jsfiddle I tryed multiple solutions but I need the list item change width and heigth based on the a:before element and, with the scale() instruction the li dimention do not change.
There is a solution to have this in Firefow whitout fix the li dimentions?

Answer 1

I mostly use JavaScript to emulate zoom. Since Firefox is the only modern browser not to support it, I occasionally use it in cases where its absence does not negatively impact usability.
Here is a quick and dirty version of a generic solution:
<div data-zoom="0.5" style="zoom: 0.5">
Scaled down element
</div>
if (! ('zoom' in document.createElement('div').style)) {
setInterval(() => {
zoomed.forEach(e => {
const scale = Number(e.getAttribute('data-zoom'))
e.style.transform = 'none !important'
e.style.marginRight = '0 !important'
e.style.marginBottom = '0 !important'
const width = e.clientWidth
const height = e.clientHeight
e.style.transform = `scale(${scale})`
e.style.transformOrigin = '0 0'
const pullUp = height - height * scale
const pullLeft = width - width * scale
e.style.marginBottom = `${-pullUp}px`
e.style.marginRight = `${-pullLeft}px`
})
}, 100)
}

Answer 2

I just found a quick and dirty solution, but it works for my use-case, so it could help someone else too.
.zoomed {
zoom: 0.5;
}
becomes
.zoomed {
transform: scale(0.5);
margin: -50px;
}
where 50px is 1/4 of the .zoomed width.
Of course, there are many limitations of this approach - it overwrites any previous transform and margin, you have to manually insert the negative margin for each element (or calculate it with JS), and probably more.
But like I said, it worked for my specific use-case.

Answer 3

There is no such CSS standard property like zoom.
The reason why you code does not work in modern browsers, is that you are missing the unprefixed (standard) variant of several properties. For example when using transform:
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
-o-transform: scale(0.7);
transform: scale(0.7);