Incorrect colors and corrupt images in Firefox

[ademarre]

I routinely see images rendered incorrectly or not at all on Firefox 57 on Windows 8.1.

Here's a screenshot from https://developers.google.com/vr/concepts/vrview :

It's hit and miss. Sometimes the same page loads correctly; sometimes the image doesn't load at all, in which case there are console errors:

THREE.WebGLProgram: gl.getProgramInfoLog() ... three.min.js:73:360
THREE.WebGLProgram: gl.getProgramInfoLog() ... three.min.js:73:360
Error: WebGL warning: generateMipmap: The base level of the texture does not have power-of-two dimensions. ... three.min.js:94:215
Error: WebGL warning: drawArrays: Active texture 0 for target 0x0de1 is 'incomplete', and will be rendered as RGBA(0,0,0,1), as per the GLES 2.0.24 $3.8.2: The dimensions of `level_base` are not all positive. ... three.min.js:54:468

Below is a different image that has been saturated with green. Each time I load it in Firefox it's a different color; blue, pink, purple, etc. Sometimes it doesn't load at all and logs the same errors as above.

The console errors only appear when the image completely fails to load, not when it is rendered incorrectly or with bad colors. Sometimes the errors are followed by this line:

Image corrupt or truncated.

I have witnessed this on multiple Windows machines (8.1 and 10) with Firefox 57.

[ademarre]

A similar project, Pannellum, is experiencing the exact same issue: mpetroff/pannellum#505

This Firefox issue might be related: https://bugzilla.mozilla.org/show_bug.cgi?id=1420122 (also 1420223, 1421176, and 1382783).

[ademarre]

Browser bug. Looks like it was fixed in Firefox 58, released today.