JQuery show / fadeIn Mapping not applied: block child inside hidden parent - FireFox only

Problem: Only FireFox.

When loading the page, I have a hidden iFrame (I do not control the parent page). Inside this iFrame, I have elements that are hidden / displayed based on state and use jQuery show()/ fadeIn()to handle this.

When the iFrame hides when the page loads (it always is), display:blockor display:inline-blockdoes not apply to these elements. If the iFrame is displayed when the page loads, the child elements are handled appropriately and assigned display:block.

I understand that I can fix this problem simply by using $el.css('display', 'block'), but I want to understand the source of the problem and solve it correctly, and find out if this is a jQuery error or not. Why doesn't jQuery show items based on their parents, and why is it just FireFox (Gecko rendering engine)?

Expected Result: Regardless of the visibility or display of the parent (iFrame), children should be updated to the visible state when used $el.show()(and, of course, remain hidden until the parent is shown).

I did an extensive search for a reliable answer, but all forums end without permission or response and use a workaround instead.

Has anyone seen and / or permitted this before?

Thanks!

Update

, . 100% , iFrame, . -, iFrame.

: http://jsfiddle.net/kaizen5/BxkxB/

iFrame Fiddle: http://jsfiddle.net/pQqXc/ ( , )

, "", iFrame, . , Fiddle iFrame , . , .

"" iFrame, (re) "src", . .

+4
1

onload/onready, Firefox. .

, show() - onload iframe .

$('...').show() $('...').css('display','inline'), .

http://jsfiddle.net/xZdLx/4/ iframe http://jsfiddle.net/L3Lxn/10/ Firefox Chrome.

, jQuery Firefox, .

, show() , iframe, Firefox , iframe src -attribute.

0

All Articles