Firefox 34 causes element to vanish unless page repaint - html

Question

We are running into a weird bug with disappearing elements in the new Firefox (version 34.0.5).
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.
You can see it in this demo:
FF 34 Flash Bug
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.
When it does work normally
- One flash file - no matter the position
- 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)
What we tried - what it produces
- Repainting the page after flash files are loaded (we are using SWFObject 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).
- After the page is loaded, scrolling, resizing, changing tabs helps - element is then visible (in some cases)
- Creating an element with width/height with js at the end of the document - helps on first load, after refreshes it doesn't work.
- 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)
- Swf object with a "wmode" other than "transparent" works (not an acceptable solution for us)
What we know
- Bug happens only when MORE THAN ONE FLASH FILE is beneath the element
- Bug happens on flash versions 15 and 16 (these are tested)
- Bug happens in mozilla 34.0.5 (this one is tested)
- 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.
Current solution
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.
JavaScript:
if( navigator.userAgent.match(/Firefox\/3[4-9]/i) ){
$('.animation').addClass('firefox34FlashBug');
}
CSS:
.firefox34FlashBug {
animation: 1s linear 0s firefoxFix infinite;
}
#keyframes firefoxFix {
0% {
opacity: 0.97;
}
100% {
opacity: 1;
}
}
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).
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.
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 ;-).
Update #1:
Applying border: 1px solid transparent; to a container around every object is fixing it in the demo (also see comments in the answer from akmozo).

Answer 1

This worked for me:
Added to CSS:
.firefox34FlashBug {
animation: 1s linear 0s firefoxFix infinite;
}
#keyframes firefoxFix {
0% {
opacity: 0.97;
}
100% {
opacity: 1;
}
}
Added class="firefox34FlashBug" to my container div outside flash
Note: The demo URL "FF 34 Flash Bug" isn't working, you need to add "index.html" to it. IE http://quickbm.com/ff34flashbug/index.html
Thanks for the fix.

Answer 2

I think that the problem is because your swf objects have absolute positions.
So to avoid this problem, you can put your swf objects into a container and you can use z-index to select it's depth
compared the other elements :
CSS :
.ninja-element {
z-index: 2;
position: absolute;
...
}
.objects {
z-index: 1;
position: absolute;
...
}
HTML :
<div class="objects">
<object>
...
</object>
<object>
...
</object>
...
</div>
<div class="ninja-element">
Watch me disappear in FF 34!
</div>

Answer 3

I had the same problem, but for me it worked to force the browser to repaint just once. After all the SWF Objects are added, I added this line (everything inside of $(document).ready(function() ):
$('#wrapper').css("transform", "scale(1)");
Where #wrapper is a div around the disappearing elements. Scale(1) forces a repaint, but should not change anything about the design (unless you use scale for that element already).
edit:
or maybe better: $('#wrapper').css("-moz-transform", "translatez(0)");, because this will also force a repaint, but only in Firefox.

Answer 4

Just throwing this in there for anyone else.
FF craps the bed when you have a position: fixed element inside a parent element that has been shifted around with left (or something).
To fix this. Shift your parent element around with translate instead.
Spent hours trying to get one of these hacks to work before figuring this out... :(