A polyfill for the zoom css property in firefox. The element that is zoomed must not have a margin though!

css-zoom.js

// this is a hacky and brutal polyfill to somewhat implement zoom in firefox
// https://caniuse.com/#feat=css-zoom
// it allows to use jQuery's $('.element').css({zoom: 1.5});
// there is no effort to actually implement a normal css polyfill
// this polyfill also doesn't work when the zoomed element has margins since they are used to fake the new size.

$.cssNumber.zoom = true;
if (!("zoom" in document.body.style)) {
	$.cssHooks.zoom = {
		get: function(elem, computed, extra) {
			var value = $(elem).data('zoom');
			return value != null ? value : 1;
		},
		set: function(elem, value) {
			var $elem = $(elem);
			var size = { // without margin
				width: $elem.outerWidth(),
				height: $elem.outerWidth()
			};
			$elem.data('zoom', value);
			if (value != 1) {
				$elem.css({
					transform: 'scale(' + value + ')',
					marginLeft: (size.width * value - size.width) / 2,
					marginRight: (size.width * value - size.width) / 2,
					marginTop: (size.height * value - size.height) / 2,
					marginBottom: (size.height * value - size.height) / 2
				});
			} else {
				$elem.css({
					transform: null,
					margin: null
				});
			}
		}
	};
}

How is this used?

I used the CSS hack (not the original code, but extracts) for my own zoom implementation. I use it for automatically zooming the body depending on window size. For zooms greater 1 I get scrollbars with this implementation. For zooms just slightly above 1 I get very jumpy behaviour. Adding , overflow: "hidden" to the $elem.css(...) definition fixed this.

Hi,

Can explain how to implement this?

How to use this?

There is a bug in the size variable setting: height: $elem.outerWidth() should be height: $elem.outerHeight()

Otherwise it works fine for me!

I added the following lines to support the percentage. I would like comments

$elem.data('zoom', value);
+                        if (value.toString().indexOf('%') > -1) {
+                          value = parseInt(value)/100;
+                       }   
if (value != 1) {