title: Firefox 34 causes element to vanish unless page repaint
body: <p>We are running into a weird bug with disappearing elements in the new Firefox (version 34.0.5).</p>
  
  <p>The bug occurs on a page with two (or more) flash objects that are before an other element in the html. Whenever the page is loaded, the element just disappears.</p>
  
  <p>You can see it in this demo:
  <a href="http://quickbm.com/ff34flashbug/index.html" rel="nofollow">FF 34 Flash Bug</a></p>
  
  <p>Just open it in the newest Firefox and you will see the red div disappearing. Every repaint of that page will display it again, e.g switching the browser tab or editing the css via dev tools.</p>
  
  <p><strong>When it does work normally</strong><br>
  - One flash file - no matter the position<br>
  - Having all flash files after the element in the html 
  - Having one flash file below and one flash file above the other element (html structure)</p>
  
  <p><strong>What we tried - what it produces</strong><br>
  - Repainting the page after flash files are loaded (we are using <a href="https://code.google.com/p/swfobject/" rel="nofollow">SWFObject</a> for adding the flash files, but we are not able to attach a load event to the files) - works on the first load of the page (cache clear), doesn't work after refreshes (F5).<br>
  - After the page is loaded, scrolling, resizing, changing tabs helps - element is then visible (in some cases)<br>
  - Creating an element with width/height with js at the end of the document - helps on first load, after refreshes it doesn't work.<br>
  - Animating with css the opacity of the object infinite (we have a wrapper around the flash files and animate this one) - works (not a permanent solution)<br>
  - Swf object with a "wmode" other than "transparent" works (not an acceptable solution for us)</p>
  
  <p><strong>What we know</strong><br>
  - Bug happens only when MORE THAN ONE FLASH FILE is beneath the element<br>
  - Bug happens on flash versions 15 and 16 (these are tested)<br>
  - Bug happens in mozilla 34.0.5 (this one is tested)<br>
  - Multiple elements after the flash files will also disappear
  - When you open the page for the first time, it doesn't show the element. If you then refresh (F5) multiple times, in some cases it will show everything normally, and in some cases it doesn't show the element nor one or both flash files that are overlapping.</p>
  
  <p><strong>Current solution</strong><br>
  A constant browser repaint of the disappearing element (or elements!). We do this with a simple CSS3 animation that animates the opacity infinitely between 0.97 and 1 with the duration of 1s.</p>
  
  <p><em>JavaScript:</em></p>
  
  <pre><code>if( navigator.userAgent.match(/Firefox\/3[4-9]/i) ){
      $('.animation').addClass('firefox34FlashBug');
  }
  </code></pre>
  
  <p><em>CSS:</em></p>
  
  <pre><code>.firefox34FlashBug {
      animation: 1s linear 0s firefoxFix infinite;
  }
  
  @keyframes firefoxFix {
      0% {
          opacity: 0.97;
      }
      100% {
          opacity: 1;
      }
  }
  </code></pre>
  
  <p>That is a very hacky and not a nice solution, but the only "fix" we could find that doesn't change the structure of the html (we need multiple flash files below other elements in our project).</p>
  
  <p>Did anyone else ran into the same problem? We know a couple ways to deal with that behaviour, but we can't explain it yet.</p>
  
  <p>Thank you very much in advance! I hope that we can find a good way of dealing with this problem and that we can find an explanation for the new ninja elements in FF 34 ;-).  </p>
  
  <h2><strong>Update #1:</strong></h2>
  
  <p>Applying <code>border: 1px solid transparent;</code> to a container around every object is fixing it in the demo (also see comments in the answer from akmozo).</p>