Mozilla Firefox memory leak when resizing image slideshow
<p>I'm developing a website that requires simple slideshow with cross-fading of images.
Extracted portions can be found here: <a href="https://jsfiddle.net/musicyeo/qaLhsr6t/18/" rel="nofollow">https://jsfiddle.net/musicyeo/qaLhsr6t/18/</a></p>

<p><strong>Bug Repro Steps:</strong>
Resize the browser (hence the images) back-and-forth quickly a few times.
Memory usage of Firefox starts to climb till 1.5 GB to 2 GB, until some images disappears. Console log: Image corrupt of truncated.
After closing browser, process is dangling.</p>

<p>Before the error appears, e.g., at below 1 GB or so, a one-time resize of the browser lowers and stabilizes memory usage to around 600+ MB or so.</p>

<p><strong>Affected Browsers:</strong> Mozilla Firefox latest version (both 32 and 64 bits).</p>

<p><strong>Working Browsers:</strong> Chrome and IE works fine without this problem. Memory consumption is comparatively low and stable.</p>

<p>Seems likes Firefox creates and stores in RAM multiple copies for each image, possibly of different dimensions during resize, and the "interim ones" are not released.
Or if I am not implementing slideshow the correct way, please enlighten me.</p>

<p>Thanks!</p>

<p><strong>HTML:</strong></p>

<pre><code>&lt;div id="mainWrapper"&gt;
&lt;div class="heroImg"&gt;
    &lt;img class="resizable" src="https://static.pexels.com/photos/25945/pexels-photo-25945.jpg"&gt;
    &lt;img class="resizable" src="https://static.pexels.com/photos/33092/domestic-cat-cat-adidas-relaxed.jpg"&gt;
    &lt;img class="resizable" src="https://static.pexels.com/photos/26919/pexels-photo-26919.jpg"&gt;
    &lt;img class="resizable" src="https://static.pexels.com/photos/106343/pexels-photo-106343.jpeg"&gt;
    &lt;img class="resizable" src="https://static.pexels.com/photos/29013/pexels-photo-29013.jpg"&gt;
    &lt;img class="resizable" src="https://static.pexels.com/photos/26880/pexels-photo-26880.jpg"&gt;
    &lt;img class="resizable" src="https://static.pexels.com/photos/106606/pexels-photo-106606.jpeg"&gt;
    &lt;img class="resizable" src="https://static.pexels.com/photos/105987/pexels-photo-105987.jpeg"&gt;
&lt;/div&gt;
</code></pre>

<p></p>

<p><strong>CSS:</strong></p>

<pre><code>#mainWrapper { max-width: 996px; }

.heroImg {
    display: block;
    height: 500px;
    position: relative;
    overflow: hidden;
}

.heroImg img {
    display: block;
    position: absolute;
    opacity: 0;
    z-index: 1;
}
</code></pre>

<p><strong>Javascript:</strong></p>

<pre><code> $(document).ready(function() {
    // Set the first image and fade it in
    $('.heroImg img:first-child').animate({opacity: 1.0}).addClass('frontImg');
    setInterval('showNext()', 2000);
});

function showNext() {
    var current = $('.heroImg img.frontImg');
    if (typeof current === undefined || current === null)
        current = $('.heroImg img:first-child');

    // Only transit image if current item is not animating
    if (current.queue('fx').length === 0) {

        // Get the next(wrapped-around) image
        var next = current.next();
        if (current.is('.heroImg img:last-child'))
            next = $('.heroImg img:first-child');

        // Fade in next image. Class frontImg has large z-index set in CSS.
        next.css({opacity: 0.0}).addClass('frontImg').animate({opacity: 1.0}, 1000);

        // Fade out current image
        current.animate({opacity: 0.0}, 1000).removeClass('frontImg');
    }
}
</code></pre>