IE8: Does not work with elements with "display:none;" on page load, which are later shown with javascript

[derekatkinson]

I'm using this polyfill to scale icons to a specified size, and I just encountered the first problem I couldn't solve myself. It's worth noting that I'm using this polyfill in combination with Grunticon, but I don't believe that's the problem as Grunticon still does its job and the icons show up if I remove the polyfill.

What I'm experiencing is that my icons in a Bootstrap 3 popover are altogether missing when the popover appears. I'm guessing that this has something to do with the polyfill being applied on page load while the icons in question are hidden with their parent using display:none;, so the polyfill doesn't see them and do whatever it is meant to do.

I'm calling the polyfill with the following HTML:

<!--[if IE 8]>
  <style>[class*="icon-"] {-ms-behavior: url(dist/backgroundsize.min.htc);behavior: url(dist/backgroundsize.min.htc);} [class="icon-ul"]{-ms-behavior:none;behavior:none;} [class="icon-ul-lg"]{-ms-behavior:none;behavior:none;}</style>
<![endif]-->

so that it can style my icons in this popover content:

<div id="popover-password-rules" class="hide">
  <ul class="icon-ul">
    <li class="text-success"><i class="icon-li icon-check-mmgreen"></i><b>8-20 characters long</b></li>
    <li><i class="icon-li icon-check-disabled"></i>Include at least 3 of the following:
      <ul class="icon-ul">
        <li class="text-success"><i class="icon-li icon-bullet-mmgreen"></i><b>Lowercase letter</b></li>
        <li><i class="icon-li icon-bullet-disabled"></i>Uppercase letter</li>
        <li class="text-success"><i class="icon-li icon-bullet-mmgreen"></i><b>Numeric digit</b></li>
        <li><i class="icon-li icon-bullet-disabled"></i>Special character</li>
      </ul>
    </li>
  </ul>
</div>

I'm not sure how to solve this. I guess my question is: is this a known issue, or, if not, is it possible to apply the polyfill at some later point or in some other way so that it can be applied to these hidden elements?

I can put together a JSFiddle if necessary, but it may take some time and work to get the necessary resources hosted and hooked up correctly.

Thank you!

[derekatkinson]

Another relevant detail, after the popover is closed my next image on the page that uses this polyfill changes to become no longer scaled down:

[derekatkinson]

The same occurs in Bootstrap 3 modals. Basically the polyfill won't apply to anything with "display:none;" on page load that is shown later via javascript. Is there a workaround for this?