Firefox：windows firefox 网络扩展图标背后的黑色背景

Question

在 windows 上的 Firefox 上，我们得到图标后面的黑色背景（将图像设置为背景的范围）。 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(&quot;http://localhost:3000/uploads/service/logo/1/15five.png&quot;);"></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 OS，在 Linux 上似乎在 firefox 上运行良好。所以，怀疑是某些图形支持问题。

如何解决这个黑色背景问题？非常感谢您的帮助。

PS: 没有在任何地方将背景设置为黑色。

Answer 1

解决这个有点棘手，因为它是特定于平台的渲染问题。

因此，为了解决它，对布局进行了更改。

.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;
}

Firefox：windows firefox 网络扩展图标背后的黑色背景

Firefox: Black background behind icons on windows firefox web extension

css

windows

firefox

firefox-addon-webextensions