SVG中的css伪类并不总是出现在打印页面上

Question

我正在为打印媒体创建一个样式表，其中包括一个内联SVG作为元素的伪类(即。， ::before, ::after).

在Chrome中测试时，它似乎工作得很好，但是当页面首次在Firefox和Safari中加载时，SVG元素没有出现在打印预览中。然后在所有后续尝试中出现。

我不确定到底发生了什么，但如果我不得不猜测，我的猜想是:当页面没有被缓存时，呈现伪元素的延迟正在并发地发生在创建打印页面的浏览器上。

我很想知道为什么会发生这种情况，如果有任何解决方案，SVG伪元素可以可靠地使用。

下面是一个简化的代码示例。请查看是否可以重现此问题:

var button = document.querySelector('button');
button.addEventListener('click', function () {
	window.print();
});

div {
    text-align: center;
}
button {
    margin: 2em;
    padding: 1em 2em;
}
@media print {
    button {
        display: none;
    }
    div::before {
        content: 'Pseudo-elements';
        font-weight: bold;
        margin-top: 1em;
    }
    div::after {
        position: relative;
        display: block;
        margin-top: 1em;
        content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><circle cx='50' cy='50' r='50' /></svg>");
    }    
}

<div>
    <button>
     print
    </button>
</div>

Answer 1

我可以再现。

这似乎是一个bug与svg的加载，我想这将是相同的任何图像。

一个解决方法是加载它与display: none:

的@print规则之外。

var button = document.querySelector('button');
button.addEventListener('click', function() {
  window.print();
});

div {
  text-align: center;
}
button {
  margin: 2em;
  padding: 1em 2em;
}
div::after {
  display: none;
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><circle cx='50' cy='50' r='50' /></svg>");
}
@media print {
  button {
    display: none;
  }
  div::before {
    content: 'Pseudo-elements';
    font-weight: bold;
    margin-top: 1em;
  }
  div::after {
    opacity: 1;
    position: relative;
    display: block;
    margin-top: 1em;
  }
}

<div>
  <button>
    print
  </button>
</div>