Hi everyone! I recently published a background creation app and I’m confused about its canvas behavior, namely that the canvas sometimes doesn’t display on mobile. I know it doesn’t show on my old iPhone on Safari and Firefox but I heard that it does on a OnePlus 6T. I know the issue isn’t (solely) the usual culprit, viewport size, through testing on desktop.
I’m not sure how to emulate this mobile behavior on my computer otherwise I’d be doing that to debug. On page load the user should see a patterned background with a colorful gradient fill applied to each shape.
The relevant elements are:
<div class="styledCanvas"> <div class="grainOverlay" style="width: 3000px; height: 3000px; left: 0px; top: 0px; z-index: 1; position: inherit;"></div> <div class="tileCanvas" style="position: inherit; filter: blur(0px);"> <canvas id="defaultCanvas0" class="p5Canvas" width="3000" height="3000" style="width: 3000px; height: 3000px;"></canvas> </div> </div>
grainOverlay which provides the grain effect, and
grainOverlay is z-indexed above its sibling
tileCanvas which is the parent of the canvas element in question.
My current lines of inquiry are:
grainOverlayfunctions differently on mobile somehow? Maybe it’s covering up the canvas which is actually being displayed.
- I use a resource-intensive process in my draw function to draw the gradient for each shape:
p5.drawingContext.createLinearGradient(), this could be problematic on mobile.
To be clear I’m not asking anyone to debug my app for me. I’m more curious about possible explanations that are currently unknown unknowns to me that I can explore. How could this happen? And how can I recreate the wonky mobile behavior on my computer? Thanks for reading.