使用多个实例和背景大小时Firefox的背景图片闪烁

所以我在页面上有几个元素共享背景图片。我的页面使用引导程序，并且这两个元素都是3列宽度的容器。每个都有一个背景，并通过背景大小进行包含。使用多个实例和背景大小时Firefox的背景图片闪烁

在第二个元素上，我将背景宽度设置为90％，因此它比另一个背景略小。

在Firefox中，这会导致第一个元素背景不断闪烁。如果我更改CSS以便两个背景的大小相同，问题就会消失。

它在Chrome和IE中运行良好，它只是一个Firefox问题。

这是一个错误，任何人都有类似的经验？

尝试将图像切换为SVG并停止闪烁。然而，在我的情况下，不可能使用SVG，因为背景图像具有堆积如山的污垢，所以SVG就像2MB。

这里是HTML的JIST和CSS：

<section id="content-panel"> 
    <div class="container"> 
    <div class="row-fluid"> 
     <div id="thankyou-1" class="span3 bubble-bg-2"> 
     </div> 
     <div id="thankyou-2" class="span3 bubble-bg-2"> 
     </div> 
    </div> 
    </div> 
</section> 
.bubble-bg-2 { 
    background: url('/Content/Images/bg-bubble-2.png') no-repeat; 
    background-size: contain; 
} 
#thankyou-1 { 
    padding-top: 15px; 
    text-align: center; 
} 
#thankyou-2 { 
    background-position: center 25px; 
    background-size: 90% auto; 
    padding-top: 15px; 
}

来源

2013-04-08 KGambit

什么版本的Firefox？什么操作系统？ – 2013-04-08 09:02:40

在Win7上测试FF 19.0和20.0。 – KGambit 2013-04-08 22:48:05

你可以在小提琴中复制你的问题吗？ – Mooseman 2013-04-08 23:28:25

如果移动的背景大小的声明关闭共享类，并将其设置在＃三江源-1的ID，会发生什么？

.bubble-bg-2 { 
    background: url('/Content/Images/bg-bubble-2.png') no-repeat; 
} 
#thankyou-1 { 
    background-size: contain; 
    padding-top: 15px; 
    text-align: center; 
} 
#thankyou-2 { 
    background-position: center 25px; 
    background-size: 90% auto; 
    padding-top: 15px; 
}

来源

2013-08-26 13:10:01 Derick

使用多个实例和背景大小时Firefox的背景图片闪烁

回答

相关问题