Question

在FF 28.0中，我看到图像之间有一个薄薄的黑色边框。

我也在悬停时看到动画瑕疵。一些边框跳过帧，而另一些边框以与图像本身不匹配的奇怪颜色值结束。

稍微调整浏览器窗口的大小，您应该看到工件。

Webkit渲染得很好。

硬件是MacBook Air运行10.9.2,1.3 Ghz i5。图形是Intel HD Graphics 5000 1024 MB。

以下是相关代码。

HTML

<div class="container">
    <div class="row">
        <div class="column">
            <div class="bg-img gray" style="background-image: url('http://placekitten.com/g/200/300');"></div>
            <div class="bg-img color" style="background-image: url('http://placekitten.com/200/300');"></div>
        </div>
        <div class="column">
            <div class="bg-img gray" style="background-image: url('http://placekitten.com/g/200/300');"></div>
            <div class="bg-img color" style="background-image: url('http://placekitten.com/200/300');"></div>
        </div>
        ...
        <!-- two more .columns. four per row --->
    </div> <!-- .row -->
    ...
    <!-- another .row -->
</div> <!-- .container -->

CSS

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.container {
  width: 100%;
  margin: 0 auto;
  height: 100%;
}

.row {
  width: 100%;
  height: 50%;
  overflow: auto;
}

.column {
  width: 25%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
}

.column:hover .color {
  opacity: 1;
}

.color, .gray {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: local;
}

.color {
  position: absolute;
  top: 0px;
  left: 0px;
  transition: opacity 500ms ease 0s;
  opacity: 0;
}

Firefox具有奇怪的边框/渲染工件以及相邻的背景图像

0 个答案: