Transform, Scale, Zoom, and more: across browsers

mag-inIn the process of creating an internal tool for my team I found that trying to zoom an image and move it around was not as simply as a single “zoom” CSS attribute. While Chrome supports “zoom” and it works quite well, the other browsers don’t work consistently, especially if you store the zoom and position values in a script. I stored the positions on the images to be replayed and I found all kinds of inconsistencies across browsers.  What did work consistently is the  transform CSS property, but that brought another challenge.

The challenge is I want to programmatically  move and zoom around the image and using a function like jQuery’s animate function needs to use a numerical value. The solution was not so easy to find on the web. The best response I found was this answer on StackOverFlow.

Below you see my zoomImage function where a zoom value is passed in and the image is animated to the new zoom level. First thing is to animate a psuedo property (which you can name it want you want, I named mine “myzoom”). Then use the step function to actually execute the animation:

function zoomImage(z){
$('#zoomimage').animate({ myzoom: z }, {
 step: function(now,fx) {


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.