IE8cv puzzler: setting zoom:1 via class hides content

Question

If the following conditions are met, setting zoom:1 hides the element's content:

1. Markup must have this structure:

   <table><tr><td>
       <div class="overflow">
           <span class="zoom">zoom</span>
       </div>
   </td></tr></table>
   

2. These styles must be defined:

   .somethingSPECIAL .zoom {
       zoom: 1;
   }
   .overflow {
       width: 300px;  /* Whatever px here. */
       height: 150px; /* Whatever px here. */
       overflow: auto;
   }
   

3. The somethingSPECIAL class should be applied to any ancestor of the markup above after page load (like on a button click).

4. The browser you've been forced to use must be IE8 in Compatibility View.

Here's a live demo.

Why is this happening, and what can I do to prevent it? (I can't get rid of zoom: 1. I also have to set the parent class as shown in the demo.)

Answer 1

I noticed that the width and height of the span element went from 33x19 to 0x0. So if you set it back to 'auto' it works.

$('.zoom').css('width', 'auto');

See http://jsfiddle.net/GgY6C/29/