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.

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.

• javascript
• html
• css
• internet-explorer
• internet-explorer-11

Share Improve this question Follow edited Dec 17, 2014 at 22:38 Sampson 269k7676 gold badges545545 silver badges568568 bronze badges asked Dec 17, 2014 at 13:33 Simon BobSimon Bob 39511 gold badge55 silver badges1616 bronze badges 9

• 2 "... it isn't remended for production sites." You might want to try using the transform property instead, with the scale() function. – Pointy Commented Dec 17, 2014 at 13:36
• 1 scale() does not behave in exactly the same way. It will not affect the layout of my app. I need it to behave like using the browsers zoom. Furthermore, scale() does not work in IE11 either. – Simon Bob Commented Dec 17, 2014 at 13:41
• As i said, this app has a very specific hardware-target, so i don't mind cross-browser issues, as long as it works in IE11. – Simon Bob Commented Dec 17, 2014 at 13:43
• It works fine in IE10, so I suspect it works in IE11 also. – Pointy Commented Dec 17, 2014 at 13:54
• It does not work in IE10. It does works in Chrome. – Simon Bob Commented Dec 17, 2014 at 14:02

 |  Show 4 more ments

1 Answer 1

Sorted by: Reset to default 5

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-pliant 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/jonathansampson/hy5vup49/2/

After some discussion in the ments, 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/jonathansampson/024krs33/