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/