CSS transform scale is not working in IE

Question

I am doing zooming image using Jquery and CSS:

$('#Site img').css({
        zoom: CurrentZoom,
        '-ms-transform': 'scale(' + CurrentZoom + ')',
        '-moz-transform': 'scale(' + CurrentZoom + ')',
        '-o-transform': 'scale(' + CurrentZoom + ')'        
    });
    $('#Site canvas').css({
        zoom: CurrentZoom,
        '-ms-transform': 'scale(' + CurrentZoom + ')',
        '-moz-transform': 'scale(' + CurrentZoom + ')',
        '-o-transform': 'scale(' + CurrentZoom + ')'
    });

but it's working fine with all browser except the IE .

Answer 1

According to msdn , to ensure maximum compatibility, including both transform and -ms-transform is preferred.

This only works for IE9+

For IE8< , check Matrix filter .

Answer 2

You can check caniuse.com for compatibility in different browsers and versions.

Answer 3

My guess would be that in IE9, it is accepting both the zoom and -ms-transform , and they're interacting in unexpected ways.

My suggestion would therefore be to only have the zoom style active in IE8 or earlier, and let IE9 work with just the -ms-transform .

You may need to use a tool like Modernizr to determine whether to use zoom or transform . (I don't like to mention it, but browser detection would also do the trick here, since we know exactly which browsers can be targetted)

It's worth mentioning that if you're using a recent version of jQuery, you don't need to specify the vendor prefixes when setting styles in jQuery code; it will add them for you, so don't need all that repetitive code.

It's also worth pointing out that the zoom style is not the same as transform:scale . It works differently and doesn't always provide the same results, particularly in relation to the other elements around it.

I guess you've tested it on IE8 and you're happy with the result, but if not, make sure you do test it and that you're happy with the result. If it doesn't work the way you want, there may be a case for dropping IE8 support entirely for your page, which would mean that you don't need the zoom style at all, which in turn would mean you don't need to worry about any possible conflict with it and transform , and thus no need to do any of the above.