Problem: FireFox Only.
On page load, I have a hidden iFrame (I do not control the parent page). Inside this iFrame I have elements that are hidden/show based on state, and using jQuery show()/fadeIn() to handle this.
When the iFrame is hidden on page load (it always is), display:block or display:inline-block is not being applied to these elements. If the iFrame is visible on page load, the children elements are properly handled and assigned display:block.
I realize I can fix this issue by simply using $el.css('display', 'block'), but I want to understand the source of the issue and resolve it properly, and discover if this is a jQuery bug or not. Why is jQuery not showing elements based on their parents, and why is this only FireFox (Gecko rendering engine)?
Expected Result:
Regardless of the parent's (iFrame's) visibility or display, the children elements should be updated to a visible state when using $el.show() (and of course, remain hidden until the parent element is shown).
I've done some extensive searching for a solid answer, but all the forums end without a resolve or answer and use a workaround instead.
Anyone seen and/or resolved this before?
Thanks!
Update
As I was creating the fiddle(s) I came on to a solution. I'm not 100% positive on what is going on behind the scenes with the iFrame, but now see a pattern. It appears load events are not firing within the iFrame.
Parent Fiddle: http://jsfiddle.net/kaizen5/BxkxB/
iFrame Fiddle: http://jsfiddle.net/pQqXc/ (there is a container on this page that is made visible on load)
You'll notice that when you click the ('bad') button first that it reveals the iFrame and the fiddle appears to be empty. This is because the Fiddle iFrame is calling a function on load that should reveal the contents of the fiddle. This mimics the issue I am seeing in my own solution.
The 'good' button, shows the iFrame and also (re)assigns the 'src' forcing a new rendering of the page. This time, the on load events fire just fine.