JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
  <title>.</title>
  <style id="hideStuff">
    p { display: none; }

    /* NOTE: Hiding iframes triggers the bug */
    iframe { display: none; }
  </style>
</head>
<body>

  <p id="foo">Can You See Me?</p>  
  <p>The bug only affects Firefox with jQuery 1.8+</p>  





  <br/><br/><br/>
  <p>...and this patch to jQuery 1.8.3 fixes it:</p>
  <pre style="background:#eee;padding:0 10px;overflow:auto;"><code>
--- a/jquery/jquery-1.8.3.js
+++ b/jquery/jquery-1.8.3-fixed.js
@@ -7002,13 +7002,16 @@ function css_defaultDisplay( nodeName ) {
     // get element's real default display by attaching it to a temp iframe
     if ( display === "none" || display === "" ) {
         // Use the already-created iframe if possible
-        iframe = document.body.appendChild(
-            iframe || jQuery.extend( document.createElement("iframe"), {
-                frameBorder: 0,
-                width: 0,
-                height: 0
-            })
-        );
+        if ( !iframe )
+        {
+            iframe = document.createElement("iframe");
+            iframe.frameBorder = 0;
+            iframe.width = 0;
+            iframe.height = 0;
+            // Hidden iframes always report display as 'none' in Firefox
+            iframe.style.cssText += "display: block !important;";
+        }
+        document.body.appendChild( iframe );

         // Create a cacheable copy of the iframe document on first call.
         // IE and Opera will allow us to reuse the iframeDoc without re-writing the fake HTML
</code></pre>
</body>
</html>

JavaScript

// In the beginning all paragraphs are hidden.

// Showing p#foo should work - but doesn't.
$('p#foo').show();

// Remove style#hideStuff className to reveal
// the hidden things.
$('style#hideStuff').remove();

// but p#foo still remains hidden.
// ...even if we try showing it again.
$('p').show();

// and even if we try toggling between hide and show
$('p').hide().show();

// Resetting the `style.display` property
// will make it appear!
$('p').css('display', '');
// ...only to disappear again
// next time we toggle its visibility
$('p').hide().show();

// shigh...