Canvas sources sized in exact powers of 2 (e.g. 512x512) render as black squares

[ryanhamley]

mapbox-gl-js version: starting from v0.50.0

browser: all

Steps to Trigger Behavior

1. add a canvas source layer
2. set the height and width to be an exact power of 2

Link to Demonstration

https://jsfiddle.net/rsh412/2exz0ukh/3/

Expected Behavior

https://jsfiddle.net/rsh412/wrtq3hpk/2/

Actual Behavior

The console shows many warnings [.WebGL-0x7f9a73693000]RENDER WARNING: texture bound to texture unit 1 is not renderable. It might be non-power-of-2 or have incompatible texture filtering (maybe)? for both texture unit 1 and texture unit 0.

If you change the size of the canvas in the example from 256x256 to 256x257, the canvas renders as expected.

I tracked the introduction of the bug to 4e926e3.

[ryanhamley]

cc @ansis

[Grooo]

Thanks!
I had been crazy all day with this mystery.
It doesn't seem to be resolved yet.

[kirrukirru]

Can we expect the resolution any time sooner?

[tavimori]

Debug for several nights and now I found this is an open issue...

[tavimori]

I found a workaround to this:

1. Initially set the canvas to a non-power-of-2 size.
2. After Mapbox render it once, resize the canvas won't trigger the bug.

[SnailBones]

Same as #11132, fixed by #11162