[iOS/Safari] Overlapping <IonBreadcrumbs> with <IonTitle>

Ionic Framework
#1

In iOS Safari, when <IonTitle> and <IonBreadcrumbs> are used together in an <IonHeader><IonToolbar></IonToolbar></IonHeader>, the breadcrumbs will overlap the title. This happens on narrow viewports as on an iPhone SE. The breadcrumbs completely overlap the title text, making the text unreadable and the breadcrumbs unusable.

This issue occurs on iOS Safari, not on Android/Windows Desktop.

IMG_0051
IMG_0051750×973 46 KB

See this reproducible, minimal test case:

Clone it, install the dependencies and start/build the app.
Note: I am also trying to set a Stackblitz/Sandbox up for this, but encountered some technical issues.

#2

From the examples I found a workaround for this issue:
Wrap the <IonTitle> and <IonBreadcrumbs> into separate <IonToolbar> components.

The <IonTitle> component is actually responsible for the overlapping in iOS: It is absolutely positioned. The workaround puts both on separate lines.

I would like to see the breadcrumbs being next to the heading until the <IonHeader>/viewport becomes too narrow and then break into the next line.
This requires styling a shadow DOM element, which isn’t trivial as the .toolbar-container element inside the <IonToolbar> component has to be selected by CSS. I don’t think this is possible

/* For this approach the `<IonTitle>` and `<IonBreadcrumbs>` have to be inside the same `<IonToolbar>` */
ion-toolbar .toolbar-container { /* doesn't work */
    display: flex;
    flex-flow: wrap;
}

ion-title {
    position: static;
}
#3

(Thanks to Discord user @Bodin)

      <IonHeader>
        <IonToolbar>
          <div className="ios-flex-toolbar-content">
            <IonTitle>/* ... */</IonTitle>

            <IonBreadcrumbs>
            // ...
            </IonBreadcrumbs>
          </div>
        </IonToolbar>
      </IonHeader>

ion-header .toolbar-title-large.ios .table-title {
    position: static;
}

ion-header ion-toolbar.ios > div.ios-flex-toolbar-content {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
}