javascript - 使用带有 CSS 过渡的 SVG 图像调整 div 的大小会导致 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;
}

Link to GIf preview

Answer 1

您会在您的网站上看到这些规则的结果(缩短的 vendor 前缀):

.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 之前还有更多规则。