背景大小的 firefox 错误，带有悬停和不透明度

Question

我想我在 firefox 中发现了一个奇怪的错误。

当我在具有背景大小属性(不透明度发生变化)的 div 上有一个悬停类时，在背景中使用的某些图像的大小在水平或垂直方向上改变一个像素。

我在这里举了一个问题的例子: http://jsfiddle.net/xz4F8/

html:

    <div class="group cont_tutto">
<div class="conteiner_articoli_cinema">
  <div class="back_navigazione_articoli-mag">
    <div class="articolo_mag">
      <div class="tipo-articoli-mag">speciale cinema</div>
      <a href="http://www.google.it">
        <div class="articolo_mag_cover" style="background-image:url('http://pu2.everyeye.it/public/immagini/16072013/Now-You-See-Me--I-maghi-del-crimine_articolo.jpg')"></div>
        </a>
      <div class="mag_titolo">
        <h2><a href="/pc/articoli/stealth-bastard-deluxe_recensione_18438" title="Stealth Bastard Deluxe">the lone ranger </a></h2>
      </div>
    </div>
    <div class="articolo_mag">
<div class="tipo-articoli-mag">speciale cinema</div>
<a href="http://www.google.it">

<div class="articolo_mag_cover" style="background-image:url('http://pu2.everyeye.it/public/immagini/16072013/theloneranger384470.jpg')"></div>
</a>
<div class="mag_titolo">
        <h2><a href="/pc/articoli/stealth-bastard-deluxe_recensione_18438" title="Stealth Bastard Deluxe">the lone ranger </a></h2>
      </div>
    </div>
<div class="articolo_mag">
  <div class="tipo-articoli-mag">rcensione fumetti</div>
  <a href="http://www.google.it">
    <div class="articolo_mag_cover" style="background-image:url('http://pu2.everyeye.it/public/immagini/16072013/Nodo-alla-gola_articolo.jpg')"></div>
    </a>
<div class="mag_titolo">
        <h2><a href="/pc/articoli/stealth-bastard-deluxe_recensione_18438" title="Stealth Bastard Deluxe">the lone ranger </a></h2>
      </div></div>
<div class="articolo_mag">
  <div class="tipo-articoli-mag">recensione cinema</div>
  <a href="http://www.google.it">
    <div class="articolo_mag_cover" style="background-image:url('http://pu2.everyeye.it/public/immagini/15072013/Distribuzione-cinema-e-dvd_articolo.jpg')"></div>
    </a>
  <div class="mag_titolo">
        <h2><a href="/pc/articoli/stealth-bastard-deluxe_recensione_18438" title="Stealth Bastard Deluxe">the lone ranger </a></h2>
      </div>
</div>
<div class="articolo_mag">
  <div class="tipo-articoli-mag">recensione serie tv</div>
  <a href="http://www.google.it">
    <div class="articolo_mag_cover" style="background-image:url('http://pu2.everyeye.it/public/immagini/08072013/trueblood-stagione6309717.jpg')"></div>
    </a>
<div class="mag_titolo">
        <h2><a href="/pc/articoli/stealth-bastard-deluxe_recensione_18438" title="Stealth Bastard Deluxe">the lone ranger </a></h2>
      </div>
</div>
<div class="articolo_mag">
  <div class="tipo-articoli-mag">recensione blu-ray</div>
  <a href="http://www.google.it">
    <div class="articolo_mag_cover" style="background-image:url('http://pu2.everyeye.it/public/immagini/13072013/ax967523.jpeg')"></div>
    </a>
<div class="mag_titolo">
        <h2><a href="/pc/articoli/stealth-bastard-deluxe_recensione_18438" title="Stealth Bastard Deluxe">the lone ranger </a></h2>
      </div>
</div>
<div class="articolo_mag">
  <div class="tipo-articoli-mag">recensione cinema</div>
  <a href="http://www.google.it">
    <div class="articolo_mag_cover" style="background-image:url('http://pu2.everyeye.it/public/immagini/12072013/lareligiosa825433.jpg')"></div>
    </a>
 <div class="mag_titolo">
        <h2><a href="/pc/articoli/stealth-bastard-deluxe_recensione_18438" title="Stealth Bastard Deluxe">the lone ranger </a></h2>
      </div>
</div>
</div>
</div>
</div>

CSS:

@charset "utf-8";
/* CSS Document */


.articolo_mag {
    background-color: #EFEFEF;
    float: left;
    width: 129px;
    margin-right: 6px;
}

.articolo_mag_cover {
    width: 129px;
    height: 177px;
    background-size:129px 177px;
    background-color: #333;
}


.articolo_mag_cover:hover {
    background-size:129px 177px;
    opacity: 0.9;}

.mag_titolo {}
.mag_titolo h2 {display: table-cell;
    vertical-align: middle;
    background-color: #FFF;
    font-size: 10px;
    font-family: Lato, Arial;
    font-weight: bold;
    border: 1px solid #D9D9D9;
    text-align: center;
    text-transform: uppercase;
    padding-top: 0px;
    padding-bottom: 0px;
    height: 30px;}

.mag_titolo h2:hover {  color: #09F;
    background-color: #E4E4E4;}

.mag_titolo h2 a {
    display: block;
    color: #000000;
    text-decoration: none;
    text-transform: uppercase;
    width: 119px;
    line-height: normal;
    padding-right: 4px;
    padding-left: 4px;
    padding-bottom: 0px;

}
.tipo-articoli-mag {
    background-color: rgba(0,0,0,0.75);
    height: 17px;
    width: 115px;
    color: #FFF;
    font-family: Lato, Arial;
    font-size: 10px;
    font-weight: bold;
    padding-top: 3px;
    padding-left: 5px;
    text-transform: uppercase;
    left: 5px;
    z-index: 25;
    position: relative;
    float: left;
    margin-top: 150px;
}

如果我使用背景大小的封面选项，大小问题似乎减弱了，但是，一些图像在页面更新期间开始闪烁，或者悬停状态(在我看来，firefox 不能决定女巫是正确的图像大小)

问题似乎是由我用来将页面中所有内容居中的 div 容器触发的 (cont_tutto) witch 的宽度为 951px..

在所有其他浏览器上完全没有问题!

Answer 1

您必须添加“-moz-backface-visibility: hidden”才能解决该问题。这是解决方案:http://nickpye.com/2013/04/03/css3-opacity-transition-image-wiggle-bug-in-mozilla-firefox/