show() and fadeIn() does not always work on hidden iframe's content in Firefox

I have an HTML with a hidden div. The element is hidden via Internal CSS display: none;. On $(document).ready() the div is set to visible with show() or fadeIn().

I include the above page in a hidden iframe. Once I make the iframe visible with show(), the hidden div does not appear inside the iframe in Firefox 51.0.1 (32-bit), Windows 7 Professional.

The div appears in any other browsers. It also appears when the div is hidden via inline CSS not via Internal CSS.

Since this is a problem related to iframe-s, I am not able to provide a complete, working test through jsbin or jsfiddle. I provide the source of the two pages, so the problem can be reproduced on localhost:

1. iframe_content.html: http://jsbin.com/segucewiru/edit?html,output
2. index.html: https://jsbin.com/kekipuqeqi/edit?html,output

Once you open index.html in Chrome, and you click on the show button, four div will appear. This is the expected behavior. If you try index.html in Firefox, only two div appears. The two div that is set to be hidden via Internal CSS, will not be shown, which is an inconsistent behavior.

Thank you for your help, and please let me know if you need more details.