I was seeing this odd bug where web page elements would momentarily — as in 1 frame out of 60 – disappear. At first I thought it was a React thing, but it turned out to be something I’d never previously seen.
LLMs love to put eye candy in a UX. Background animations, translucency, etc. It turns out that if there’s too much of that, particularly on older computers, the browser’s rendering compositor can’t keep up.
Per chatGPT:
“The eye candy appears to have overwhelmed or stalled the browser’s rendering compositor, causing a partially painted frame.”
You have to know what this is when you see it, because it happens too fast for (at least) the current chatGPT in-app browser to record it – so it will tell you wrong answers about what’s causing the bug when you describe it.
How were you able to get answer? Did you deduce it and then confront the LLM? Or did it make that deduction itself? And how were you able to confirm its correctness?
Not being combative. Truly trying to understand how to work with these tools to have confidence in diagnoses and corrections - and to what degree it is the tool and the human in the process.
I’ve seen some strange behavior that the code doesn’t explain, so it’s probably browser-related. For example, I have an app with many drawers and modals.
Sometimes, when I scroll, the screen flickers and the background appears. I could never figure out what in the code might cause that, so it’s very likely the browser.
I even rewrote the whole thing in Svelte and Lit, then went back to React, and the issue was still there.
These browser things are like ancient technology from a bygone era. There was probably a lot of sweat and real human effort involved.
I’ve run into similar issues over the years, especially when working on complicated visualizations or experiences optimized for large, high resolution displays. I’m only familiar with the technical details for Chrome, but I’ve seen similar things with Safari. The issues I had are from Chrome limiting how much GPU memory its compositor can use for storing the layers and tiles the page is broken up into. The more layers your page has and the larger they are (created by transforms, will-change, etc.) the more memory it needs. If there isn’t enough memory for everything while drawing a frame, then it will skip some tiles (which are parts of layers). This can cause flickers, and parts of elements to randomly disappear.
Great question. I recorded the screen using Quicktime, and found that the anomaly occurred for only 1 frame out of 60. Then chatGPT suggested that the eye candy was overwhelming the render engine on that computer.
I removed much of the eye candy (e.g. animated background orbs that I never saw anyway, as they were almost the same color as the background) and the anomaly was fixed.