bug: iOS 18 (Angular, standalone) reorder wrapper hiding inner ionic elements content

[jakubforman]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

If I use ion-reorder as a wrapper, there is a problem on iOS 18 that some nested ion-... elements get "hidden" or their internal content disappears. Since the CSS of these elements doesn't change, I'm guessing that the problem will be inside the WebKit and Shadow DOM implementation when repositioning elements via ion-reorder. This is just a guess. At the moment, I don't know or have any idea how to fix this bug.

• I have tried Capacitor v6 and v7 but no change.
• I have not tested Android.
• The bug is not manifested in iOS 18, the browser (Chrome) does not show the bug
• The bug manifests itself when using both ionic cap run ios -l -external and ionic cap build ios

The sample below is from the pre-production version of the app, the link to the repository contains only the minimum necessary basis to reproduce the error.

iOS 17.5 working fine	iOS 18+ bugging
Zaznam.obrazovky.2025-02-15.v.10.52.45.mov	Zaznam.obrazovky.2025-02-15.v.10.53.57.mov

Expected Behavior

Each version of iOS must work the same, i.e. dragging and dropping must not cause hiding of internal parts of elements that are under ion-....

Steps to Reproduce

Use ion-reorder as wrapper with some ion- elements inside.

    <ion-reorder-group [disabled]="false" (ionItemReorder)="handleReorder($event)">
    @for (stop of stops; track stopIndex; let stopIndex = $index) {
      <ion-reorder>
        <ion-item>
          <ion-badge slot="start">{{ stop.badge }}</ion-badge>
          <ion-label>{{ stop.name }}</ion-label>
        </ion-item>
      </ion-reorder>
    }
  </ion-reorder-group>

Code Reproduction URL

https://github.com/jakubforman/ionic-reorder-wrapper-bug

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/opt/homebrew/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 8.4.3
@angular-devkit/build-angular : 17.3.12
@angular-devkit/schematics : 17.3.12
@angular/cli : 17.3.12
@ionic/angular-toolkit : 11.0.1

Capacitor:

Capacitor CLI : 7.0.1
@capacitor/android : not installed
@capacitor/core : 7.0.1
@capacitor/ios : 7.0.1

Utility:

cordova-res : not installed globally
native-run : 2.0.1

System:

NodeJS : v22.9.0 (/opt/homebrew/Cellar/node/22.9.0_1/bin/node)
npm : 10.8.3
OS : macOS 15.2

Additional Information

I have also tried Angular 17, 18 and 19, no change.