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

Question

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

当我在具有 background-size 属性的 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) 女巫的宽度为 951 像素..

在所有其他浏览器上都没有问题！

Answer 1

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

Answer 2

尝试添加

transform: rotate(360deg);

就像我对悬停时移动 1px 的以下图像所做的那样

.btnRoll:hover img {
  filter: alpha(opacity=80);
  opacity: 0.8;
  transform: rotate(360deg);
}

Answer 3

我最近遇到了同样的问题，这正是我选择坚持使用 Firefox 中内置的“检查元素”功能的确切原因

• 制革商