IE may render symbols as sticking out of iframe/object/embed etc

[emilbjorklund]

Demo of the bug here: http://jsbin.com/soyuka/5

IE (versions 9-11, i.e. all that support SVG) have a bug where SVG content can be rendered as sticking out of an iframe, object or embed element.

I’m not a 100% sure of exactly which conditions trigger the bug, but in the examples, a few things seem to be necessary:

• A nested symbol element, i.e. a symbol inside of a symbol, being used.
• A transform applied to that symbol, so that the rendered shape ends up off-canvas.

A few conditions also seem to remedy the behavior:

• Setting symbol { overflow: visible; } with CSS. Note: visible makes the overflow hidden, which I thought was kind of funny.
• Using transform on another symbol sometimes seem to correct the rendering. (Uncomment the other markup in the SVG example to see this behavior)

The bug seems somewhat intermittent – sometimes, it renders fine, but on the next reload shows up again.

I initially saw the bug only when the same SVG-file was requested into multiple iframe elements, but not when a single instance was loaded, so I mistakenly thought that there was some form of ”ID collision” going on cross-documents, but that does not seem to be the case.

The bug does not appear in Edge.

[semmel]

🍰 Thank you very much for identifying the bug and discovering the work-around of setting symbol { overflow: visible }!

<div class="draggable">
   <iframe></iframe>
   <iframe>
   <!-- here are the SVGs in a scrollable div-->
   </iframe>
</div>

That setting solved the SVG leaking out of an scrollable iframe inside a draggable ( read:transform: translate3D(px, px, px); opacity:0.5) div element into the host page. The bug occurred often even when there was no transformation applied.
Now the SVGs inside the iframe may still stick out but just while dragging the container div. It's not so bad since it's half transparent in that state anyway. 😋

😆 We all had a really loud laugh as we saw that overflow: visible actually prevents the "overflowing".
Thank's a lot for publishing!
Hey you're certainly our honorary employee of the month 🏆 and qualify for a free lunch when you visit Rostock.
Matthias

[emilbjorklund]

@semmel Glad to hear it! Always happy when this little repo of mine can help someone. :)