PixiJS WebGL renderer resize affecting display position at certain size

[matquango]

I'm currently using pixi to build an animated navigation menu for a website i'm working on. For the sake of example, imagine a bunch of clickable squares with images in a grid like layout. I've added some "responsiveness" javascript code to the menu to shift items depending on the browser window width as well. It's much like having a lot of floated content that will transition from a grid into a single column at smaller widths. When a user resizes and hits one of these breakpoints I call a resize to the Pixi renderer which in turn resizes the canvas (using renderer.resize(w,h) ) after reflowing content. For most cases, this works perfectly fine. I've noticed, though that when I use the WebGL renderer (I'm using autoDetectRenderer to take advantage of gpu throttling) the displayed content starts offsetting and scaling when the renderer resize is setting a height greater than 4000. The hitAreas and interaction seem to be correct, but all my menu icons are in the wrong position. Through testing, I've noticed that the displayed contents perceived y position decreases (moves up and off of the canvas) as the WebGL renderers height is increased passed 4000 until I can't see the content at all.

Strange thing is that this doesn't happen in the regular CanvasRenderer. Any thoughts as to what's going on here?

[xerver]

Have you tried doing this in a regular webgl context without PIXI? I've noticed that sometimes browsers have a limit on the size a context can be.

[kyptov]

Mayby power of 2? Some GPU can`t render textures more than 2048*2048, some can 4096*4096. 

 

Here some discussion: 

 

http://www.html5gamedevs.com/topic/6762-max-texture-size-for-webgl/

[lukasyno]

Webg has bug/size limit to 4096(2^12) max.

please see here

http://jsfiddle.net/jhickner/862de4nj/ 

and set width/height with big number (> 4096), you can see distortion..

more details about this webgl size limit/bug you can  see here

https://github.com/mrdoob/three.js/issues/5194

 

BTW, IE don't have this bug.

[DennisSmolek]

Out of curiosity why are you using Canvas to do what you are doing? It seems you would be better served by letting the browser and CSS handle the resizes, and if you needed to have all the boxes be their own canvas they can each be it's own instance. 

 

Another option, as you said it's for a nav, I'm guessing you are using it to change a view. You could layer the boxes onto your view area and simulate that they are in the same space.