---
title: "A Blank Space on iPhone Screens Looked Like a Missing Image. It Was the Banner's Frame."
canonical: https://dxdev.com/blog/2026-04-09_empty-banner-had-been-waiting/
datePublished: 2026-04-09
---
The banner on an event page had a height of zero on phones, and the reason was that the rule for responsive reordering, which moves parts of a page around when the screen shrinks, had carried the content block out of the banner and left an empty frame behind. That block was the only thing giving the frame any height, so the slideshow of background images sat inside a container with nothing to hold it open. On an iPhone in Safari it looked as though the pictures had simply failed to show, and that was the explanation I believed.

That guess made sense on the surface. The page had a large banner with a changing set of background images and a block of content placed over it. It looked right on a desktop computer. On a phone, the space where the banner belonged looked empty. Safari is well known for doing odd things with the usable height of a phone screen, so it was easy to blame the browser before checking anything else.

The part I had missed was called **responsive reordering**, a rule that moves pieces of a page to different places when the screen gets smaller. Think of the banner as a picture frame. The background slideshow was the picture. The content block inside it was the solid backing that gave the frame its size. On smaller screens, the rule moved only the content block farther down the page. It left the frame where it was.

The images had not disappeared. The frame was still there too. But it had nothing inside it to give it usable height, so it collapsed to zero. A recent change to the way the inner content was put together had exposed a problem that the old arrangement had been hiding. What looked like a browser problem was really a page that had been pulled apart.

I did not start there. I described the issue to an AI coding assistant as a Safari rendering problem. It responded with a series of reasonable ideas inside that explanation. First, the banner got a minimum height so the background would have room to show. Then it got a fixed height in pixels. Next, the image source was swapped in case the file could not be found. A small watcher was added to notice when the content came back and encourage the background to paint again. That watcher also referred to an old name and quietly did nothing.

None of those changes moved the blank space on an iPhone. Each one might have helped if the browser had truly been the problem. None of them put the missing part back inside the frame.

The cost was not a broken bank account or a dramatic outage. It was time and patience. The session reached **197 prompts** before anything worked. A follow-up round brought the total to **245 prompts** across two attempts. The growing list of patches should have been a warning. Instead of getting simpler and closer to the answer, the changes were getting more elaborate while the symptom stayed exactly the same.

That is a hard pattern to notice when every next suggestion sounds sensible. An AI assistant is very good at offering plausible repairs to the problem it has been given. I had handed it a label, "Safari rendering problem," and it kept working faithfully inside that label. The assistant was not being careless. I had not told it that a recent layout change might matter, and neither of us stopped early enough to ask whether the page itself still had the shape we thought it had.

The useful turn came from asking a smaller, plainer question at the phone-sized version of the page: what is actually inside this banner right now? The answer was immediate. Its height was zero. There was nothing left inside it. The background slideshow was still present, but there was no content left inside the frame to hold it open.

The repair was smaller than any of the failed patches. When the screen became small, the whole banner moved together: the outer frame, the background, and the content inside it. Nothing was pulled out and left behind. The banner had its structure again, the background had a place to appear, and the blank space was gone. The unused watcher, including its stale reference to an old name, was removed as part of the cleanup.

I took two lessons from this. First, a long list of fixes that do not change what people see is information. It is not proof that you need a cleverer fix. It may mean the original story about the problem is wrong. Second, giving an AI more chances to answer the same poorly framed question can make the detour longer. It can produce more polished versions of the wrong repair.

This is not limited to websites. A landscaping company can keep replacing a broken schedule, a shop can keep changing a form, or a family can keep resetting a printer, all because the first explanation sounded right. Sometimes the useful move is not another repair. It is opening the drawer, looking at what is actually there, and admitting that the problem may be one layer below the one you first blamed.

The banner on that event page had a height of zero, and 197 prompts, then 245 across two attempts, went into everything except looking at that number. Every patch (a minimum height, a fixed pixel height, a swapped image source, a watcher pointed at an old name) assumed the frame still had a backing to hold it open, when responsive reordering had already carried the content block away and left an empty frame behind. The fix that worked added nothing. It moved the frame, the slideshow, and the content together on small screens, so the backing was inside the frame again and the blank space had nothing left to be.