fix: adapt full-width modal controls to vertical bars - #229
Conversation
Playwright test results
Details
|
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
| ion-app.ios-theme-vertical-bars ion-content:is(.ios, .md):not(.ios-theme-disabled, .ios26-disabled):not(:where(ion-menu *, ion-popover *)) { | ||
| --ion-safe-area-left: 0px; | ||
| --ion-safe-area-right: 0px; |
There was a problem hiding this comment.
🟡 中央表示のモーダルで指定済みのセーフエリア余白が消える
中央表示のモーダルに --ion-safe-area-right: 12px を指定しても、内部のコンテンツとツールバーには 0px が適用されます。モーダル固有の余白が失われ、内容やボタンが意図より端に寄ります。
Learn more
この変更で、レール用の ion-content と ion-toolbar のセレクターが、中央表示の ion-modal の子要素にも一致するようになりました。両セレクターは --ion-safe-area-left と --ion-safe-area-right を 0px に上書きします。モーダル本体の resolved inset を 0px にしても、モーダルが独自に設定した Ionic のセーフエリア値まで消す必要はありません。同じ問題は ツールバーのセレクター にもあります。
Example: アプリが中央表示のモーダルに --ion-safe-area-right: 12px を設定すると、従来は内部の ion-content に 12px が継承されました。変更後は 0px となり、指定した右余白が消えます。
Recommended fix: ion-content と ion-toolbar のセレクターを通常ページまたは .ios-theme-vertical-bars-modal 内に限定し、中央表示のモーダルには従来の Ionic のセーフエリア処理を残してください。モーダル内で独自の --ion-safe-area-* を設定するケースも検証してください。
Was this helpful? React with 👍 or 👎 to provide feedback.
| if ( | ||
| top && | ||
| (pointerActive || | ||
| Array.from(wanted).some((element) => element.getAnimations().some((animation) => animation.playState === 'running'))) | ||
| ) | ||
| schedule(); |
There was a problem hiding this comment.
🔍 実行中のアニメーションによる継続的な寸法監視
表示中のモーダルのコンテンツに実行中のアニメーションがある間、寸法が変わらなくても毎フレーム全モーダルを走査します。長時間のカスタムアニメーションを使うアプリへの影響を確認してください。
Was this helpful? React with 👍 or 👎 to provide feedback.
|
📊 Ionic 9 Playwright Test Report View the detailed Ionic 9 report: https://rdlabo-dev.github.io/ionic-theme-ios27/pr-229/ Ionic 8 runs against the same screenshots in a separate matrix job. View both results in the workflow run. |
|
/update-screenshots |
|
ℹ️ No screenshot changes detected. The current screenshots are already up to date. |
npm beta publishedCI passed for the merge commit npm install @rdlabo/ionic-theme-ios27@1.2.0-beta.pr229.sha4838a8540978 |
1 participant
Full-width Ionic modals now project eligible toolbar controls, including Close, into the Vertical Control Area. Centered dialogs retain their toolbar layout without inheriting the page's rail inset. Full-width sheets follow their visible bounds as their breakpoint changes, matching the SwiftUI behavior observed on the iPhone Duo simulator.
The existing Web and native projection paths share modal eligibility and foreground selection. Only the topmost modal contributes controls; dismissal restores the previous surface and preserves Ionic's
canDismissbehavior. Web controls remain inside the modal for focus handling. Existing page toolbar offsets are unchanged.Validation: