Изменение размера div с изображением SVG с переходом CSS вызывает странные перекрестные линии в Firefox

Question

Для сайта я написал короткую заставку, чтобы скрыть страницу, пока все не загрузится. Затем наложенный div получает новый класс и изменяет размеры / трансформируется в меньший размер и позицию.

Пример реального времени на https://www.hafen17.de/ показывает «проблему» SVG: при изменении размера Firefox показывает крестик на задней части изображения.

Я пытался воспроизвести это на этом JSFiddle , но на заднем плане нет перекрестных линий.

HTML

<div id="loading"><img src="logo.svg" alt="Logo" /></div>

CSS:

html,body {
    background-color: #cecece;
}
#loading {
    background-color: #25323f;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -o-transition: all .8s ease;
    transition: all .8s ease;
}
#loading.close {
    left: 20px;
    top: 20px;
    width: 0;
    height: 0;
    opacity: 0;
}
#loading img {
    max-width: 420px;
    height: auto;
    width: 60vw;
}

Ссылка на предварительный просмотр GIf

Answer 1

Вы можете добавить эти стили для решения вашей проблемы:

#loading::before, #loading::after {
  display: none;
}

Answer 2

Вы видите результат этих правил на своем веб-сайте (префиксы поставщиков сокращены):

.close::after {
 transform:rotate(-45deg)
}
.close::before,.close::after {
 content:'';
 position:absolute;
 height:2px;
 width:100%;
 top:50%;
 left:0;
 margin-top:-1px;
 background:#000;
 opacity:.5;
 transition:opacity 0.3s ease-out
}
.close:hover::before,.close:hover::after {
 opacity:1
}
.close::before {
 transform:rotate(45deg)
}

Может быть, вы используете имя класса для нескольких целей? Непосредственно перед ними есть больше правил с селекторами close.thick и .close.rounded.