css zoom not working in ie11

Question

I'm building an app using angular. It is supposed to run on tablets and touch-enabled devices.

I want to give the user the ability to zoom/scale up the app, for those with bad eyesight and clumsy fingers. To do this I'm using this script, which is executed when the user clicks a zoom-button: Here is the code

<!--code start -->  
$scope.zoomLevel+= 0.1;

$('body').css({
   zoom: $scope.zoomLevel
});

This works perfectly in chrome, but does nothing at all in IE11.

I'm using twitter bootstrap, angular and jquery.

When testing it in jsFiddle I'm perfectly able to use zoom in IE, so I'm guessing that me, or some third party library is setting a property that affects the zoom property in IE.

• What could this be?

PS: I don't mind it not working in firefox. This app will always be run in IE11.

Answer 1

The zoom property is an older feature that really shouldn't be leveraged today. It has poor cross-browser support, belongs to no formal standard, and as such I (an engineer on the IE team) would encourage you to find a more standards-compliant method for moving forward.

Since version 9, Internet Explorer has supported CSS Transforms, and the scale function. This particular feature has much better cross-browser support, and would adequately suffice for your needs. I've created a small fiddle that shows both zooming and scaling side-by-side, to confirm the similarity in the experience.

Fiddle: http://jsfiddle.net/jonathansampson/hy5vup49/2/

After some discussion in the comments, you pointed out valid layout differences between zoom and transformational scaling. If you wish to achieve the effect of zoom cross-browser, I would instead encourage you to consider using em or rem units in your project, and leverage font-size inheritance as your zooming mechanism.

Fiddle: http://jsfiddle.net/jonathansampson/024krs33/