Strange layering issues

[fred-boink]

Not sure what is happening but the layers seem to be broken. For sure this is something I am doing but I am wondering if anyone has seen this and knows what I am doing wrong! Thanks.

[RobertBroersma]

Hi @fred-boink

I'm not entirely sure how it works, but I had this exact same issue when I was developing the big heads website.

I'm guessing you're using Next JS SSG or SSR, which prerenders a random character. Once the client hydrates this prerender, yet another random character is generated. These are not the same and that somehow causes this weird phenomenon! (causing that warning message in your console as well).

Could you try having this page not-prerendered? Or at least the character.

[fred-boink]

I am using Nextjs. Ill try to get it to render only clientside. Thanks for your answer! Ill let you know how it goes.

[fred-boink]

It worked! Thank you. Curious, why foes facialHairMap have 3 Noop?

[RobertBroersma]

@fred-boink Great!

When generating a random character I randomly select an array element from every available part. This means if the options were medium beard, stubble and nothing there would be a 66.7% chance of a random character having a beard. I though this would be a bit much, but I didn't want to implement a whole probability model, so I just added some extra None in there 😅 .

For the same reason I added 5 Noops to the hatMap!