Bug 161913 – embedded SVG is reloaded when css @media breakpoint changes layout

• Component: SVG
• Status: RESOLVED CONFIGURATION CHANGED

[Martin Häcker]

Created attachment 288694 [details]
reproducer

I noticed this bug when trying to build a responsive display of game scores. The problem as far as I can tell, seems to be:

* When resizing the main window so that the @media rule for the width (767px) is triggered
* The SVG is suddenly reloaded by the browser
* And therefore looses all state it had assigned in the DOM

In my reduction of this problem, please observe all of the following:
* The onLoad handler is called multiple times, as visible by the logging statement in it
* When you resize the window, the gage-pointer should become invisible once you cross the @media rule

I have guarded the code inside this handler, to only actually manipulate the SVG on the first call. This simulates that the user-interaction changes state in the SVG that is lost on reload <- THIS IS THE BUG!!!!

The workaround is to externally save all state, and then reapply it when onload is called again (this is quite a pain in the butt!)

I have observed this bug in Safari (Version 9.1.3 (11601.7.8) and Technology Preview Edition Release 12 (Safari 9.1.2, WebKit 11603.1.3)) and in Chromium (nightly Version 51.0.2683.0 (64-bit)).

Firefox (latest) does not (seem to) exhibit this bug.

[Martin Häcker]

Please see the chromium issue I filed: https://bugs.chromium.org/p/chromium/issues/detail?id=646427

[Brent Fulgham]

Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.