Emulating css zoom in IE8 - any jQuery libraries, polyfill, anything?

Question

I'm picking up where another SO user's question went unresolved a few years ago: IE8 doesn't zoom content when applying a CSS zoom value to a DIV

Here's the example: http://jsbin.com/exicel

and here's how it looks under IE8 and Chrome after pressing 'Zoom Out':

Clearly Chrome scales everything to fit as appropriate. IE8 isn't a cool enough kid to do so, apparently.

Any decent workarounds for this? I'm playing around with zooming on the parent in IE8, but that's causing other issues in my layout.

I've tried:

• Wrapping the target element in a "zoomWrapper" element which becomes the actual target. This works kind of OK, but IE8 doesn't resize the zoomWrappers box model causing a lot of odd element placement issues when things wrap on the page.
• Using jQuery .scale() and .animate() -- scale seemed like it was a good idea, but I wasn't able to actually illict results similiar to a zoom effect. Animate isn't really that useful.

• Scaling using DXImageTransform:

  $('.rackContentWrapper').css({
      'filter': 'progid:DXImageTransform.Microsoft.Matrix(M11=' + zoomValue + ', M12=0, M21=0, M22=' + zoomValue + ', SizingMethod="auto expand")',
  });
  

This completely slaughters text while having the same issues as just scaling with CSS zoom.

So... this has to be doable, right? Maybe there is a library out there to handle this?

Answer 1

Some people have been successful at getting ms-zoom css property working, see: How can I scale the content of an iframe?

Answer 2

It is not possible. Several people have tried but they all fail to work in IE8:

• Zoomooz
• JSImpress
• Zui53
• Presenter.js

These and many others have tried and failed to make a cross platform zooming library