1161368 - Dynamically-loaded image sometimes receives 206, never completes

Status: UNCONFIRMED

(Core :: Networking: Cache, defect, P5)

Description

[Eevee (Evelyn Woods) [:eevee]]

I'm building a little animation, like a visual novel.  So at the beginning I want to load all the images.  I do something like this (translated from coffeescript + jquery):

    var img = document.createElement('img');
    container.appendChild(img);
    var promise = new Promise(function(resolve, reject) {
        img.addEventListener('load', resolve);
        img.addEventListener('error', resolve);
    });
    img.src = '...';
    return promise;

Elsewhere, all these promises are aggregated together.  If any of them fails, I show an error; once they all succeed, I let the viewer play the animation.

But once in a great while, one or two of the images are requested with a Range header (I think it was always "bytes=65536-"), and get back a 206.  And then nothing else happens.  There are no further requests, and neither 'load' nor 'error' fire.  (So the promise never resolves, and the viewer sees "loading..." forever.)  There's nothing in the error console, not even the global one.

Once this has happened, if I try viewing the bad image directly, I still see a Range request sent and a 206 received...  but Firefox only shows a blank white tab.  Even ctrl-f5 from such a state doesn't help (presumably because the image hasn't actually loaded, so I can't "refresh" it in the first place); the only fix is to explicitly clear the last hour of my cache.

My wildest guess is that a partial image is getting stuck in the cache, /somehow/, hence my choice of component.  But beyond that I'm kind of at a loss here.

Unfortunately I've yet to figure out how to reproduce this reliably.  It happened on almost every page load, yesterday, and I foolishly chalked it up to my dev server misbehaving.  But when I finally deployed today and linked the result to an IRC channel, four people immediately reported seeing an infinite "loading" screen that was fixed by clearing their caches.  All four of them were using Firefox.

Here it is live; perhaps you'll get (un)lucky and encounter the same problem.  (warning: sound)
http://apps.veekun.com/flora-cutscenes/#prompt2-itchyitchy-part2

Comment 1

[Eevee (Evelyn Woods) [:eevee]]

Couple afterthoughts:

- I get an infinite "loading" on Android Firefox, too.  But by the looks of the server logs, it doesn't even /try/ to download any of the images, so I assume that's a different problem.

- The only other 206-related bug I could find was bug 247334, but as far as I can tell I'm not sending gzipped PNG responses.

- I found two StackOverflow questions that sound vaguely relevant, neither one with a resolution.  Curiously, both of them are from this past month.
  http://stackoverflow.com/questions/29943940/206-partial-content-error-from-image-tag
  http://stackoverflow.com/questions/29716830/partial-content-206-status-code-when-loading-an-image

Comment 2

[Firefox Bug Husbandry Bot]

Bulk change to priority: https://bugzilla.mozilla.org/show_bug.cgi?id=1399258

Comment 3

[Firefox Bug Husbandry Bot]

Bulk change to priority: https://bugzilla.mozilla.org/show_bug.cgi?id=1399258

Comment 4

[Jens Stutte [:jstutte]]

Bulk-downgrade of unassigned, >=3 years untouched DOM/Storage bug's priority.

If you have reason to believe this is wrong, please write a comment and ni :jstutte.