The banner on a production app event page collapsed to empty space on iOS Safari, and the background slideshow was sitting in the DOM the whole time.

The session ran to 197 prompts before anything worked. The count alone should have told us the diagnosis was wrong. We didn’t read it that way until the patch list was already long.

What the responsive reorder actually did

The page had a banner section: a full-width frame with a slideshow background, and an inner content module sitting inside it. On desktop this rendered correctly. On mobile, a responsive-reorder CSS rule lifted the content module out of the banner frame and placed it lower on the page.

That left the frame empty. The slideshow background was still present, but the frame no longer had the child that supplied its usable height, so it collapsed. On iOS Safari it showed up as blank space. The image was there. The layout structure that gave the frame dimension was gone.

The reorder rule wasn’t new. A recent change to the inner module’s markup made the collapse visible at mobile breakpoints where it had previously been masked. The regression had been waiting to surface.

The patch list

Claude Code is good at generating plausible interventions inside whatever abstraction you point it at. We pointed it at “Safari rendering problem” and it produced a coherent sequence of fixes:

  • A min-height on the banner frame to force the background to render even with an empty child element.
  • An explicit pixel height on the same frame as a fallback.
  • A MutationObserver watching for the content module to be reattached, meant to re-trigger background paint once the DOM settled. The observer also had a bad variable reference pointing to a stale node name, so it was a second defect layered on top of the wrong fix.
  • A source swap on the slideshow’s image asset to rule out a 404.

None of these changed the symptom on iOS Safari. Each could be reasonable under a different diagnosis, but none addressed what had happened. The content module had been structurally removed from the banner frame, leaving the frame without a sizing child.

The agent hadn’t been told the layout had changed. We hadn’t explained it clearly, and across those 197 prompts neither we nor the agent stepped back far enough to ask whether the frame structure itself was the problem. Each fix was a reasonable response to the symptom as described. The pile of reasonable responses is what should have stopped us earlier.

Looking inside the frame

Once we reframed the question, the next step was simple. Instead of asking why the banner background didn’t render on mobile Safari, we opened DevTools at the mobile breakpoint and asked what was actually inside the banner frame:

const frame = document.querySelector('.banner-frame');
console.log(frame.getBoundingClientRect());            // height 0
console.log([...frame.children].map(n => n.className)); // []

The answer was nothing. The reorder rule had moved the content module out, and nothing had replaced it.

The fix was to move the whole banner frame, background and content together, when the breakpoint fired, instead of moving only the content module out of it. It was one edit to the reordering logic, smaller than any single one of the failed patches. The frame was repositioned with its inner structure intact, the slideshow had an anchor to render against, and the blank space went away.

We removed the orphaned MutationObserver at the same time, along with the stale variable reference watching a node no longer in scope. Both were leftovers from a session that spent most of its length searching the wrong space.

What the prompt count was telling us

A growing list of failed interventions with no movement in the symptom is worth stopping for. In this session the prompt count made the pattern visible: later patches got more elaborate while still compensating for the limits of the original diagnosis. That was the moment to reset and inspect the frame directly.

The AI coding assistant wasn’t the villain here. It gave reasonable responses to the diagnosis we supplied. Unless the workflow explicitly asks for competing hypotheses and direct inspection, a human still has to challenge whether the problem has been framed correctly.

A follow-up testing session brought the total to 245 prompts across two branches. Both sessions spent much of their length inside the wrong abstraction. The useful question, what is inside the banner frame at the failing breakpoint, was quick to answer once we asked it.

When several fixes in a row haven’t changed the symptom, stop patching and restate the hypothesis. Have whoever is doing the work, human or agent, inspect the structure and data directly and consider whether the defect sits in a different layer. Here, looking at the frame itself revealed the cause after 197 prompts of patching.