How to simulating css zoom in firefox?

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.

enter image description here

There is a solution to have this in Firefow whitout fix the li dimentions?

I can't figure it out either. https://developer.mozilla.org/en-US/docs/Web/CSS/zoom says that "unlike CSS Transforms, zoom affects the layout size of the element." That's important because `transform: scale` does not change the layout size, but `zoom` does. I can't figure out a workaround using standard CSS that will do exactly what zoom does with respect to layout size. — Wyck, May 22 '18 at 15:07
fireFox does not support zoom property using css https://stackoverflow.com/questions/51179710/css-zoom-property-in-the-firefox/55454507#55454507 — Rizwan, Apr 01 '19 at 11:56

user3654410 · Answer 1 · 2019-11-08T12:04:10.367

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

I can confirm that this solution works really well. – Mike Oct 25 '22 at 19:48 — Mike, Oct 25 '22 at 19:48

score 0 · Answer 2 · answered Nov 20 '20 at 15:37

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.

score -3 · Answer 3 · answered Nov 28 '14 at 10:54

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

answered Nov 28 '14 at 10:54

feeela

29,399
7
59
71

1

zoom is a non-standard http://css-tricks.com/almanac/properties/z/zoom/ and isnt supported in FF – JonasT Nov 28 '14 at 13:04
@Shyghar I saw your fiddle and even played around with before posting this answer. What did you mean? – feeela Nov 28 '14 at 13:08
@feeela In my fiddle there is a rule ( ul.small li a:before ) with the exact code you post. I ask in my question if there is a way to change li dimentions according the a:before dimetions. The scale transformation does not do that. So your answer was in my question.. – Shyghar Nov 28 '14 at 14:57
@Shyghar …but as of the version history of your question, this answer was only added to the question, after I posted it. So I answered that question, you copy&pasted the answer to the question and then tell me, it was already there. Yeah, sure. – feeela May 28 '18 at 13:14

How to simulating css zoom in firefox?

3 Answers3