I am trying to render a simple IonList inside a modal. It works fine on Android, and older iOS versions, but on iOS 26 some dividers between IonItems are missing. It happens randomly and there is no specific pattern. I have inspected the rendered elements and css and there is no difference between the two items.
Here’s the code:
<IonList className="ion-no-margin">
{options.map((option) => (
<IonItem key={option.value}>
<IonGrid className="ion-no-padding">
<IonRow className={"ion-align-items-center"}>
<IonCol size="1">
<IonCheckbox
value={option.value}
labelPlacement="end"
checked={isChecked(option.value)}
onIonChange={(event) =>
toggleSelection(
event.target.value,
event.target.checked,
)
}
></IonCheckbox>
</IonCol>
<IonCol size={isPhone ? "11" : "6"}>
<IonLabel
className="ion-text-wrap"
onClick={() => toggleSelection(option.value)}
>
<h3>{option.label}</h3>
<p>{option.details}</p>
</IonLabel>
</IonCol>
{isPhone && <IonCol size="1"></IonCol>}
<IonCol size={isPhone ? "9" : "4"}>
<FormikIonInput
name="override"
type="number"
label={t("parcel.areaWithUnit")}
placeholder={"overridePlaceholder"}
step="0.1"
/>
</IonCol>
<IonCol size={isPhone ? "2" : "1"} className="ion-align-self-center">
<OverridePercent
originalSize={option.size}
overridenSize={values.override[option.value]}
/>
</IonCol>
</IonRow>
</IonGrid>
</IonItem>
))}
{options.length === 0 && (
<IonItem lines="none">
<IonText>{t("general.noOptions")}</IonText>
</IonItem>
)}
</IonList>;
In the example picture you can see the divider missing after the second option.
