Firefox背景图片在使用多个实例和背景大小时闪烁 [英] Firefox background image flickering when using multiple instances and background-size

问题描述

所以我在页面上有几个共享背景图片的元素。
我的页面正在使用引导程序，两个元素都是一个3列宽的容器。

在第二个元素上，我使背景的宽度为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-1class =span3 bubble-bg-2> 
< / div> 
< div id =thankyou-2class =span3 bubble-bg-2> 
< / div> 
< / div> 
< / div> 
< / section> 
 .bubble-bg-2 {
 background：url（'/ Content / Images / bg-bubble-2.png'）no-repeat; 
 background-size：contains; 
} 
＃thankyou-1 {
 padding-top：15px; 
 text-align：center; 
} 
＃thankyou-2 {
 background-position：center 25px; 
 background-size：90％auto; 
 padding-top：15px; 
} 
  

解决方案

background-size声明关闭共享类并将其设置在＃thankyou-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; 
} 
  

So I have a couple of elements on a page that are sharing a background image. My page is using bootstrap, and both elements are a 3 column width container. Each has a background and is contained via background-size.

On the 2nd element, I have made the background 90% in width so it is slightly smaller then the other background.

In Firefox this causes the 1st elements background to flicker constantly. If I change the CSS so both backgrounds are the same size, the problem goes away.

It works fine in Chrome and IE, it's just a Firefox issue.

Is this a bug, anyone had similar experience?

Tried switching the image out for an SVG and it stops the flickering. However it's not possibly to use an SVG in my case as the background image has heaps of grungy dirt, so the SVG is like 2MB.

Here is the jist of HTML and 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;
}

解决方案

What happens if you move the background-size declaration off the shared class and set it on the #thankyou-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;
}

这篇关于Firefox背景图片在使用多个实例和背景大小时闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！