Jump to content

PixiJS WebGL renderer resize affecting display position at certain size


Recommended Posts

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?

Link to comment
Share on other sites

  • 2 weeks later...

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. 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...