使用多個實例和背景大小時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的背景圖片閃爍

回答

相關問題