Question

这是我已经研究了几个小时的问题，但我什至不知道是什么原因导致了这种行为。我将不胜感激，即使是最小的想法或建议。

我们的应用程序具有一些动态图标。图标是SVG。通过添加具有设置的宽度和高度的div并在包含图标URL的头部中创建样式标签（作为div的:: before-attribute的背景）来显示它们。这是一个工作示例，比我的描述（also avialable as a fiddle）更清楚。

HTML

<div class="container">
  <!-- These are generated dynamically -->
  <div class="icon" data-icon="my_awesome_icon"></div>
  <div class="icon" data-icon="my_other_awesome_icon"></div>
</div>

CSS

.container {
  width: 300px;
}

.icon {
  width: 300px;
  height: 300px;
  position: relative;
}

.icon::before {
  position:absolute;
  width: 300px;
  height: 300px;
  margin: 20px;
  content: '';
}

JS

var head = document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';

//This is created dynamically, paths are relative
var css = '[data-icon="my_awesome_icon"]::before { background:url("relative/path/to/my_icon.svg"); }';
style.appendChild(document.createTextNode(css));

css = '[data-icon="my_other_awesome_icon"]::before { background:url("relative/path/to/my_other_icon.svg"); }';
style.appendChild(document.createTextNode(css));

head.appendChild(style);

在大多数情况下，这都可以正常工作。现在，对于我们其中一位运行最新的Firefox ESR版本60.1.0（在Windows 7上没有附加组件）的客户端，不会偶尔显示。大约每500刷新一次，一个或几个图标将无法呈现。 div在那，CSS在那，规则适用于div。发送了从服务器加载SVG的请求，并以状态代码200进行响应。SVG与之前显示的499次相同，并且有效。点击刷新几次后，页面重新加载之前会短暂显示图标。使用PNG而不是SVG时，我无法重现该问题。

我怀疑这是添加div和样式标签之间的竞争条件，但是一些测试证实，不管先发生什么，它都可以工作。

更糟糕的是，我不能在我或我的同事的机器上重现该问题，而是在客户端的多台机器上重现该问题。正如我说的，我在这里完全不知所措，而罪魁祸首可能会帮上什么忙。

有时无法在Firefox 60中呈现SVG

0 个答案: