谷歌浏览器随机播放标签中的 SVG 图像<object>

Question

我有一个HTML页面，其中包含许多<object>标记，每个标记都包含不同的SVG图像。

示例：

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

在谷歌浏览器中，页面最初会按预期显示。但是，如果我离开页面浏览，然后使用后退/前进按钮返回，SVG图像会被打乱：它们可能出现在错误的<object>标记中。

示例：
在第一次查看时，页面按照标记显示：

<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>    

在后退/前进之后，图像可以被交换

<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> 

如何防止这种错误行为？

Answer 1

这是Chromium的渲染引擎Blink中的一个已知错误#352762。目前已经提交了一个补丁，但该漏洞尚未在发布版本中修复。

当前版本的一个变通方法是为每个<object>标签添加一个name属性：

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

在这种情况下，Chrome将正确识别其缓存中的SVG文件，而不是简单地在每次遇到<object>标记时分配一个随机缓存的SVG文件。

Answer 2

奇怪的是，这似乎在当前版本中仍然发生（43）。我认为这是对象标记的一个更普遍的错误，因为我所有的都有唯一的ID属性。似乎只有当你使用name属性时，这个bug才会消失——这有点讽刺，因为ID必须是唯一的！