iOS 27: content inside some flex containers can render as 0×0 (workaround available)

Hi everyone,

We want to flag a layout issue on iOS 27 (Safari 27).

Symptom

On iOS 27 devices, some parts of an app don’t appear: they render with no size at all. We first saw this with images, but it can affect anything placed in a certain container setup, described below. Nothing is wrong with the data. For example, uploaded images are stored correctly and show up on Android, desktop and older iOS versions. It happens in Safari, in PWAs and in Chrome on iOS, because every iOS browser uses the same engine as Safari.

Cause

Safari 27 changed how it sizes flexbox layouts, and one common setup now breaks. It happens when a container’s width is decided by its content, for example a column container inside a row where the container isn’t set to fill the available space.

By default, the elements inside such a container stretch to its width (Align Items: Stretch). So the container’s width depends on its content, and the content’s width depends on the container. Other browsers, and Safari before version 27, settle this by using the content’s natural size. Safari 27 can settle it at zero instead, so the content renders at 0×0 and stays that way.

This looks like a bug in Safari 27, not an Appfarm or app-setup error. Your apps may be affected even if nothing has changed on your side.

Workaround

On the affected container, set Align Items to Start instead of the default Stretch. The elements inside then size themselves based on their content and no longer depend on the container’s width.

If the container sits in a shared/custom component, change it in the component definition, and the fix applies everywhere the component is used.

One side effect: elements inside the container will no longer stretch to fill its full width. Check that this looks right in your layout.

Other options that also work

  1. Set Align Self to Start or Center on the affected element itself, instead of changing the whole container.
  2. Give the container a fixed width instead of letting its content decide it.

We’ll update this thread if anything changes on the platform side or if Apple ships a fix. If you still see missing content on iOS 27 after applying the workaround, reply here or contact support.