title: Weird iframe loads src but displays blank in firefox and safari
body: <p>I'm facing a weird issue I can't seem to figure. I'm using an iframe in a scroll box type widget, and it loads fine in Chrome.</p>
  
  <p>However, in firefox the iframe loads but displays blank 80%+ of the time. And in safari, it displays blank until I move over it with my cursor.</p>
  
  <p>What's really driving me crazy is it shows correctly time to time, but has the problem most of the time despite my best efforts.</p>
  
  <p>Any ideas why?</p>
  
  <p>The iframe loads in a corner box that scrolls up about 30% down the page.</p>
  
  <p>Here's the outputted code of the whole scroll box on the page</p>
  
  <pre><code>&lt;div id="lf-widget" class="scroll-triggered-box stb stb-bottom-right" style="position: fixed; right: 0px; border-top-width: 7px; border-top-style: solid; border-top-color: rgb(52, 152, 219); margin-right: 20px; z-index: 9999; visibility: visible; background-size: 50px; padding: 0px !important; background-image: url(https://s3.amazonaws.com/asdfasdf/assets/load.gif) !important; background-position: 50% 50%; background-repeat: no-repeat no-repeat;" data-trigger="percentage" data-trigger-percentage="0"&gt;
  &lt;iframe allowtransparency="true" src="http://app.asdfdsaf.com/asdfasdf/20/widget/#20?trigger=percentage&amp;amp;trigger-percentage=0" height="319" width="300" style="display: block !important;" frameborder="0" scrolling="no" id="lf-frame"&gt;&lt;/iframe&gt;
  &lt;div class="triangle" id="triangle" style="border-color: #3498db transparent transparent transparent !important; margin-top: -1px;"&gt;&lt;p class="inner-triangle"&gt;❯&lt;/p&gt;&lt;/div&gt;
  &lt;span id="cf-close" class="stb-close"&gt;×&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks for any input.</p>