Firefox background image flickering when using multiple instances and background-size

Question

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 version of Firefox? What operating system? – Eric Norcross Apr 08 '13 at 09:02 — Eric Norcross, Apr 08 '13 at 09:02
Tested in FF 19.0 and 20.0 on Win7. – KGambit Apr 08 '13 at 22:48 — KGambit, Apr 08 '13 at 22:48
Can you replicate your problem in a fiddle? – Mooseman Apr 08 '13 at 23:28 — Mooseman, Apr 08 '13 at 23:28

score 0 · Answer 1 · answered Aug 26 '13 at 13:10

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 background image flickering when using multiple instances and background-size

1 Answers1

Linked