Bug 39286 – SVG DOM inside an embed isn't preserved when display:none is set

• Component: SVG
• Status: NEW

An SVG graph is drawn in the DOM by javascript. If the div is hidden and then restored(by setting Display to "none" and back to "block"), all the dynamic DOM elements have disappeared. Also, after hidihg and re-showing the graph, the non-dynamic SVG <g> element can no longer have dynamically generated children added to it.

The URL http://195.137.123.15/chrome/test1.html gives a small demo of the problem. I can hide the graph by setting the div visibility to "hidden" and the graph is still there after setting it visible again, but in this case it still occupies screen space which I don't want. So

P.S.
I couldn't get the nightly build to run. The problem I'm reporting is present on Google Chrome on XP version 4.1.249.1064 (45376) and also on Chromium on Linux version 5.0.342.9 (43360) Ubuntu.

[Alexey Proskuryakov]

This is almost the same as bug 27775, but with SVG instead of a plug-in. But in this case, there is an easy workaround - there is no need to use <embed> to display SVG, it can be inserted directly into HTML content, or into an iframe.

[Alexey Proskuryakov]

Created attachment 56408 [details]
reduced test case

Yes, inlining the SVG into xhtml is a usable workround, thanks. Of course, that means serving different pages to different browsers (IE) which is a nuisance, but that's not Chromium's problem, and on the other hand it opens new possibilities for modern browsers.

[Mike Capp]

Confirming on Chrome 6.0.472.63 and Safari 5.0.2, both on Win2003.

Steve, have you tried combining visibility:hidden with position:absolute as a workaround? That ought to prevent it messing up layout.

[Darin Adler]

*** Bug 45389 has been marked as a duplicate of this bug. ***

"Steve, have you tried combining visibility:hidden with position:absolute as a workaround?"

No, I went for XHTML in the end. I realised that if I serve XHTML, then Firefox users could save the whole active page as a file for later reference (right-click, save page as...), which is a useful thing for them to be able to do. 

It's a shame that doesn't work in Chromium too, but Chromium also saves the dynamic DOM content as static SVG so you get double-images when viewing the saved file.

[Eric Seidel (no email)]

The reduction can't work due to data: urls having unique origins (at least in Chrome):

Unsafe JavaScript attempt to access frame with URL data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1000 400"><g id="layer1"/></svg> from frame with URL https://bug-39286-attachments.webkit.org/attachment.cgi?id=56408. Domains, protocols and ports must match.
attachment.cgi:8Uncaught TypeError: Cannot call method 'getElementById' of undefined