SVG line markers may disappear in Internet Explorer 11

If you have a SVG document that contains line elements with markers displayed in Internet Explorer® 11 (such as after applying the Windows 8.1 update) and the SVG content is updated on the fly by some JavaScript® code, you may notice that the line markers may simply disappear from the screen until you zoom in or out, or until you trigger refreshing the content completely!

This is surely a new bug of the latest version of Microsoft®’s browser, as the issue doesn’t occur on its previous versions, and the regression should probably be associated with an optimization “feature” they might have recently developed.

To resolve the issue on the client side, there is a workaround I’ve found, tough:

  • Using JavaScript®, register for the mousedown and mouseup events that might trigger SVG element updates;
  • When the events occur, register a time-out method call with zero or small time interval setting (just to delay the action for after the normal mouse event handlers will end their jobs) to perform the actual workaround;
  • When your method is eventually called, simply remove the SVG defs element(s) from their main container(s), and then immediately re-insert it (them) back: the browser will be forced to refresh the SVG elements that have references to “updated” definition IDs, including markers.

About Sorin Dolha

My passion is software development, but I also like physics.
This entry was posted in Computers and Internet and tagged , , , , , , , . Bookmark the permalink.

Add a reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s