Google Chrome randomly shuffles SVG images in <object> tags

Question

I have an HTML page with many <object> tags, each including a different SVG image.

Example:

<object type="image/svg+xml" data="first.svg"></object>
<object type="image/svg+xml" data="totally-different.svg"></object>   

In Google Chrome, the page initially displays as expected. However, if I browse away from the page, then return using the back/forward buttons, the SVG images are shuffled: they can appear inside the wrong <object> tag.

Example:
On first view, the page appears as per the markup:

<object type="image/svg+xml" data="first.svg">
  <!-- first.svg will appear here -->
</object>
<object type="image/svg+xml" data="totally-different.svg">
  <!-- totally-different.svg will appear here -->
</object>    

After back/forward, the images may be swapped

<object type="image/svg+xml" data="first.svg">
  <!-- totally-different.svg will appear here! -->
</object>
<object type="image/svg+xml" data="totally-different.svg">
  <!-- first.svg will appear here! -->
</object> 

How do I prevent this erroneous behaviour?

Answer 1

This is a known bug, #352762, in Blink, Chromium's rendering engine. At this time a patch has been submitted, but the bug is not yet fixed in the release version.

A workaround for the current release version is to add a name attribute to each of the <object> tags:

<object type="image/svg+xml" data="first.svg" name="first">
</object>

<object type="image/svg+xml" data="totally-different.svg"
  name="totally-different">
</object>

In this case, Chrome will correctly identify the SVG file in its cache, and not simply assign a random cached SVG file every time it comes across an <object> tag.