Bug 161913 - embedded SVG is reloaded when css @media breakpoint changes layout
Summary: embedded SVG is reloaded when css @media breakpoint changes layout
Status: RESOLVED CONFIGURATION CHANGED
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: Safari Technology Preview
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2016-09-13 10:18 PDT by Martin Häcker
Modified: 2022-07-15 17:28 PDT (History)
7 users (show)

See Also:


Attachments
reproducer (2.64 KB, application/zip)
2016-09-13 10:18 PDT, Martin Häcker
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Martin Häcker 2016-09-13 10:18:34 PDT
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.
Comment 1 Martin Häcker 2016-09-13 10:27:13 PDT
Please see the chromium issue I filed: https://bugs.chromium.org/p/chromium/issues/detail?id=646427
Comment 2 Brent Fulgham 2022-07-15 17:28:45 PDT
Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.