ionic-team / ionic-team/ionic-framework

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

未关闭
#30,190 0 条评论 1 个 reaction 已指派 0 人 在 GitHub 查看
triage
主要语言
TypeScript
星标
52.7k
派生
13.3k
平均合并
1 天 15 小时
30 天内合并 PR
51

描述

### Prerequisites

- [x] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [x] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [x] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/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 |
|---|---|
| | |

### 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.
```html

@for (stop of stops; track stopIndex; let stopIndex = $index) {


{{ stop.badge }}
{{ stop.name }}


}

```

### 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.

贡献指南

打开贡献指南

调研方向

Start with the minimal reproduction at github.com/jakubforman/ionic-reorder-wrapper-bug and the ion-reorder-group markup in the issue. Reproduce the wrapper case on iOS 17.5 and iOS 18 or later, then trace the relevant Ionic reorder behavior; done means dragging no longer hides content inside nested ion- elements on supported iOS versions.

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, ios, typescript
领域
frontend, mobile
Issue 类型
缺陷
难度
4/5
预计耗时
3-5 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。