Weird rendering bugs on mobile. Is it NextJS or my CSS skills?
I'm developing an app. It works correctly on the web (pc), but when testing it on my smartphone I get some rendering artifacts, like a ghosting. See attached video. Never seen anything like that before.
I found no pattern to replicate it. It usually appears when changing pages.
Is this a problem with my CSS, my phone or with the NextJS?
If you want to check it yourself see the link: https://wc2022bet.vercel.app/
I'd be grateful, even for the information that you were able to replicate it or not.
2 Replies
Exact reproduction steps would be helpful for these things, along with a video with audio to talk through what you're doing and what you expect to happen vs what you see happening.
From examining the site for a bit and watching the video a few times it looks like you're going to
/matches/upcoming and then going back to the homepage, but you're seeing a blend of the two pages. And once you start highlighting content, it starts to properly paint the homepage over the parts still showing the upcoming matches page.
That would likely point to a memory or other hardware issue with your device. Apps are all just pixels and computers do complicated things to figure out which pixels need to be updated on each frame and which ones don't. For some reason it didn't detect the page change requiring all that old content needing to be updated until you started highlighting text, which then needed to re-paint things to show the highlight. I'd reboot it and also try different browsers. Check for things that mess with what the screen shows like accessibility, debug, and dev tools.@michaeldrotar thanks mate, I appreciate it. I guess you might be right and it's a problem with my phone. I've tested it on another smartphone and couldn't replicate it. Weird, as I have not encountered it on other websites, just on my own.