SVG в CSS псевдо-классе не появится на все дни печати странице

Question

Я создаю таблицу стили для печатных средств массовой информации, который включает в себя встроенный SVG как содержание псевдо-классе Элемента (в т.е.::before, ::after).

При тестировании в Chrome это работает нормально, но когда страница загружается в Firefox и Safari, элемент SVG не отображается в предварительном просмотре печати. Затем он появляется во всех последующих попытках.

Я не совсем уверен, что происходит, но если бы я должен был догадаться, моя гипотеза была бы следующей: если страница не была кеширована, есть латентность, отображающая псевдоэлемент, который происходит одновременно с браузером, создающим распечатать страницу.

Мне очень любопытно узнать, почему это происходит, и если есть какое-либо решение, где псевдоэлемент SVG можно надежно использовать.

Вот пример урезанного кода. Пожалуйста, если вы можете воспроизвести этот вопрос:

var button = document.querySelector('button'); 
 
button.addEventListener('click', function() { 
 
\t 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

Я могу Репрографический.

Кажется, ошибка с загрузкой svg, я думаю, что это будет то же самое с любым изображением.

Один из способов заключается, чтобы загрузить его за пределами ваших правил @print с display: none:

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>

Другим один будет предварительно загрузить его с помощью JS, прежде чем руки.