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操作系统，在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 web扩展名图标后面的黑色背景

1 个答案: