My fiddle for this issue:
Open this in IE6-8:
In this example, click the gray box to zoom to it. When doing so, a white box is drawn inside of it. Clicking the black box zooms back out and removes the white box.
Works fine in SVG-based browsers, but not IE6-8. You can compare using the debug in the top right corner.
When first loading the app, everything is fine. In all browsers, doZoomOut reports that the initial coordinates are x0, y0, w24000, h14000.
However, when clicking on the gray box, IE6-8 reports erroneous getBBox() coordinates. It appears to be based on a width of 999 (the paper's width) instead of 24000 (the SVG's width). The x value of the inside object is 136.40412... instead of 3300, as seen in SVG browsers. In this case, the "inside" object does shows up in all browsers.
Then when zooming out, the debug reports a width of 999 for IE6-8 instead of 24000. I'm using a different algorithm for VML specifically in the doZoomOut() to accommodate for this. If that if-statement is removed, doZoomOut() on IE6-8 shows the entire SVG as a tiny little box when doing the zoom out.
So, at this point, everything is fudged, and when zooming in, the inside object does not appear because its coordinates (x3300, y3300) are way off, even though its being drawn the same way both times.
What do I have to do to get this to work?!