Firefox zoom mechanic not working as intended? - html

Question

I am using zoom: 0.5; and it is working fine on my site, but when I add moz-transform: scale(0.5); and moz-transform-origin: 0 0; To make the site Firefox compatible, the fixed positioned elements I have become unfixed and not placed in the correct place (to the top and left of where they should be). The site works as intended in chrome, and this only happens in Firefox.
Here is the code
.mobPopUp{
position: fixed;
width: 500px;
height: 200px;
border: 5px solid black;
text-align: center;
font-size: 24px;
font-weight: 900px;
color: lime;
bottom: 0px;
text-shadow: 3px 3px black;
}
#mobPopUpBlue{
right: 0px;
background-color: blue;
}
html{
zoom:0.5;
-moz-transform: scale(0.5);
-moz-transform-origin: 0 0
}
<div id="mobPopUpred" class="mobPopUp">Right click on a mob to see their stats here</div>
What am I doing wrong? And how can I have it so it works on Firefox as it does on Chrome with zoom

Answer 1

There isn't really a CSS zoom property, it's just a non-standard property invented by Internet Explorer and adopted by some other browsers for compatibility reasons. The correct property to use for scaling transformations is the transform property.
Firefox has long since remove the -moz- vendor prefix, and never implemented zoom, so that's probably why your code does nothing in Firefox, but for maxium browser support, you can use the below.
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
That will work in pretty much anything IE9 or better. If you need IE8 support, then you might try adding zoom in an IE <= 8 CSS hack.