css - Firefox: Sort baggrund bag ikoner på windows firefox web extension

Indlæg af Hanne Mølgaard Plasc

Problem



På Firefox på Windows får vi den sorte baggrund bag ikoner (et spændvidde med billedet som baggrund).
Indholdet af 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>


Og 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);
}


Problem:


Ikon-med-sort-bag [5]


Forsøgte at bruge overgange, men det foretrækkes ikke, da der er bevægelige elementer. Problemet synes også kun at være begrænset til Windows OS. Det ser ud til at fungere fint på firefox på Linux. Så mistanke om noget grafisk support problem.


Hvordan kan jeg slippe af med dette sorte baggrundsproblem? Virkelig værdsætter hjælpen.


PS: Sæt ikke baggrunden til sort overalt.

Bedste reference


Det var lidt vanskeligt at løse dette, da det var et platformspecifik renderingsproblem.


Så for at løse det, foretaget ændringer i layout.


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