Fine on Desktop, Blank on Safari: Four Things to Gather Before You Ask an AI to Diagnose It

I had just added a shuffle button to an image gallery and checked it on my desktop browser. Every shuffle worked. Then I opened the same page in Safari on my iPhone, and after a shuffle the images stayed blank. A reload fixed it. Only the moment right after the shuffle was broken.

As an indie developer running my own sites at Dolice, I run into "it doesn't reproduce on my machine" bugs a few times a year. What I'd like to say first is this: with this kind of bug, the quality of an AI's answer is mostly decided by how well you gathered evidence before asking. Below I use this one case to walk through how I gather it.

What I know, stated plainly

These points are confirmed:

• It happens when a list of lazy-loaded images is rearranged by script (the elements are moved to new positions).
• It happens in Safari on iPhone. It does not reproduce in desktop browsers.
• After the move, the images never load.
• I have not tested in-app browsers (WebViews), so I list that as unconfirmed.

What I have not done is trace why Safari behaves this way. I haven't read the spec or the engine source to back an explanation, so I won't offer one. I have a guess — that the loading check is not re-run for moved elements — but it remains a guess.

The fix: start loading yourself after the move

The fix is one idea. After moving the elements, don't rely on the browser's lazy loading; trigger loading with your own visibility check. I verified it on a real iPhone by shuffling repeatedly.

The code below shows the idea. It is not my production code, and I make no claim about how it behaves in Safari — please test it on your own device.

// Call this after a shuffle. It loads only images near the viewport.
// Assumes the real URL is kept in data-src.
function wakeVisibleImages(container, margin = 200) {
  const vh = window.innerHeight;
  container.querySelectorAll('img[data-src]').forEach((img) => {
    const r = img.getBoundingClientRect();
    if (r.bottom < -margin || r.top > vh + margin) return; // leave far-away images alone
    img.src = img.dataset.src;
    img.removeAttribute('data-src');
  });
}
 
// Minimal reproduction of the shuffle itself
function shuffle(grid) {
  const items = [...grid.children];
  items.sort(() => Math.random() - 0.5).forEach((el) => grid.appendChild(el));
  wakeVisibleImages(grid); // right after the move
}

Loading every image at once would defeat the point of lazy loading, which is why margin limits how close an image must be.

Four things to gather before you ask a model

If you ask Gemini or a similar model about this bug, collect these four things first. To be clear, I did not ask an AI about this particular bug; what follows is how I would go about it, for anyone in the same spot.

1. The environment: device, OS version, browser. Separate "Safari itself" from "in-app browser."
2. Where it reproduces and where it doesn't: "not on desktop" is itself a strong clue.
3. The action just before the symptom: here it was moving elements. The action before the symptom is sometimes closer to the cause than the blank image.
4. A minimal reproduction: not the whole site, about ten lines.

With those in hand, the request can stay short:

[Environment] Safari on iPhone (in-app browsers untested). Does not reproduce on desktop browsers.
[Symptom] After rearranging a list of lazy-loaded images by script, the images never load. A reload shows them.
[Action just before] I move child elements to new positions with appendChild.
[Reproduction] (paste a ~10-line minimal example)
[What I want] Possible causes, most likely first, and how to verify each.

I add "most likely first" and "how to verify each" so I don't adopt a guess as an answer. Whatever the model returns stays a hypothesis until I've checked it on the real device.

The line I drew after this

If I had only checked on desktop, I would never have seen this bug; everything looks correct on that screen. It was when I tried to describe the symptom that I noticed "which environments I'd tested" existed only in my head.

Until I can say which environments I've checked, I don't call it fixed — to an AI or to myself. I intend to keep that line.

One next step

Pick one place in your site where lazy-loaded images get moved — shuffling, filtering, infinite scroll — and try it on a real iPhone in Safari. If it reproduces, write down the four items above before you ask a model. I wrote about a similar "prepare before you investigate" habit in Stop Re-Reading Every Crash Report.