Css zoom not working in ie11
I am creating an application using angular . It should work on tablets and touchscreen devices.
I want to give the user the ability to scale / scale the application , for those with poor eyesight and clumsy fingers. For this I use this script, which is executed when the user clicks the zoom button : Here is the code
<!--code start -->
$scope.zoomLevel+= 0.1;
$('body').css({
zoom: $scope.zoomLevel
});
This works fine in chrome, but does nothing in IE11 .
I am using twitter bootstrap, angular and jquery .
When testing in jsFiddle I can use scaling in IE , so I am assuming that I or some third party library is setting a property that affects the scaling property in IE.
- What could it be?
PS: I don't mind it not working in firefox. This application will always run in IE11.
source to share
A property zoom
is an older function and should not be used today. It has poor cross-browser support, has no official standard, and so I (an engineer on the IE team) will recommend that you find a more standard method to move forward.
Starting with version 9, Internet Explorer supports CSS Transforms and the scaling feature. This feature greatly improves cross-browser support and is sufficient for your needs. I created a small fiddle that shows scaling and scaling side by side to confirm the similarities in experience.
Fiddle: http://jsfiddle.net/jonathansampson/hy5vup49/2/
After some discussion of the comments, you have pointed out the correct layout differences between zoom
and transformational scaling. If you want to achieve a cross-browser effect zoom
, I would recommend that you consider using units em
or rem
in your project and use font size inheritance as the scaling mechanism.
source to share