We’re building a story-driven 3D experience with React Three Fiber (Three.js underneath), made up of multiple cinematic shots.
To keep things smooth and consistent, especially on mobile, we lock our visuals once a scene starts. We do a one-time optimization before playback (resolution, etc.) and then leave it alone while the shot plays. This works fine on desktop, Android, and older iPhones.
On iPhone 17 Pro Max (Safari) though, we are seeing a really strange dotted / pixel-grid pattern across the whole render.
What it looks like
-
Solid ~60 FPS
-
No shader errors
-
The dots don’t move or flicker
-
Feels like some kind of fixed sampling / pixel grid, not noise or z-fighting
Setup
-
React Three Fiber + Three.js
-
No runtime resolution changes
Why this is confusing
Same code, same assets, same shaders but this only happens on this one device + Safari. We’re not even sure if it’s a Resolution thing or something deeper, like:
-
Safari WebGL quirks
-
Metal doing something “helpful”
-
Canvas scaling / compositing weirdness
Has anyone seen:
-
Similar grid / dotted artifacts on iOS Safari?
-
Strange behavior on newer iPhones?
-
Any known Safari + WebGL gotchas like this?
Any leads would be super appreciated !!