在 Firefox on windows 上，我们得到图标后面的黑色背景(图像设置为背景的范围)。
popup.html内容:
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Project Name| Samlple</title>
</head>
<body>
<ul id="accounts" class="thumbnails">
<li class="created_from_template autofill">
<a>
<span alt="15Five" data-powertiptarget="js-toolTipBody-538" class="app-icon js-toolTip" style="background-image: url("http://localhost:3000/uploads/service/logo/1/15five.png");"></span>
<span class="notice-icon"></span>
</a>
<span id="js-toolTipBody-538" class="js-toolTipBody toolTipBody">
15Five
</span>
<span class="serviceName">15Five</span>
</li>
</ul>
</body>
</html>
和 CSS:
.thumbnails > li > a > .app-icon {
display: block;
width: 80px;
height: 80px;
background-color: #ffffff;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
.thumbnails > li > a > span {
width: 100%;
display: block;
border-radius: 12px;
max-width: 80px;
}
.thumbnails > li > a:hover > span {
box-shadow: 0px 1px 4px 2px rgba(0, 0, 0, 0.05);
transform: scale(1.05);
}
问题:
尝试使用过渡，但不是首选，因为那是移动元素。此外，该问题似乎仅限于 Windows 操作系统，在 Linux 上它似乎在 firefox 上运行良好。所以，怀疑是某些图形支持问题。
我怎样才能摆脱这个黑色背景问题？非常感谢您的帮助。
PS:不要在任何地方将背景设置为黑色。
最佳答案
要解决这个问题有点棘手，因为它是特定于平台的渲染问题。
因此，为了解决它，对布局进行了更改。
.thumbnails {
height: 395px; /* 520px (popup height) - 50px (header) - 55px (search bar) - 20px (Footer) */
padding: 32px 20px 8px 30px;
overflow-x: hidden;
overflow-y: scroll;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
background: #fff;
}
.thumbnails > li {
flex: 0 0 auto;
width: 101px;
min-height: 146px;
display: block;
/* please be careful with changing margins and paddings - Firefox on Windows has some rendering issues */
margin: 0 0 0 -1px;
padding: 8px 10px 8px 11px;
border-radius: 12px;
-webkit-animation: fadeIn .5s cubic-bezier(0.77, 0, 0.175, 1) both;
animation: fadeIn .5s cubic-bezier(0.77, 0, 0.175, 1) both;
animation: fadeIn .18s linear both;
background: #fff;
}
关于css - Firefox:Windows Firefox Web 扩展图标背后的黑色背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49876922/