Skip to content

fix(sheet): fix toolbar not showing contents in ios for ionic theme #30496

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Jun 18, 2025

Conversation

OS-giulianasilva
Copy link
Contributor

@OS-giulianasilva OS-giulianasilva commented Jun 17, 2025

Issue number: resolves internal


What is the current behavior?

The ion-toolbar contents inside the sheet were not being displayed correctly in iOS.

What is the new behavior?

This PR add z-index values of the ion-toolbar's content and background containers to fix the issue.

Does this introduce a breaking change?

  • Yes
  • No

Other information

Before:
Sample Image

After:
Sample Image

@OS-giulianasilva OS-giulianasilva requested a review from a team as a code owner June 17, 2025 18:55
Copy link

vercel bot commented Jun 17, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
ionic-framework ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 18, 2025 10:28am

@github-actions github-actions bot added the package: core @ionic/core package label Jun 17, 2025
@BenOsodrac BenOsodrac requested review from ShaneK and removed request for brandyscarney June 18, 2025 10:43
@@ -175,7 +177,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange');
const header = page.locator('.modal-sheet ion-header');

await dragElementBy(header, page, 0, 125);
await dragElementBy(header, page, 0, 110);
Copy link
Contributor Author

@OS-giulianasilva OS-giulianasilva Jun 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change required due to errors when updating the snapshots.

Error: The element is being dragged past the bottom of the viewport. Update the dragByY value to prevent going out of bounds. A recommended value is 110.5.

Copy link
Member

@ShaneK ShaneK left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks fine to me. I'm not super happy with using z-indexes to fix this issue, but it's probably caused by other z-indexes at this point. This sort of z-index hell happens with manual manipulation like this 🫠

@OS-giulianasilva OS-giulianasilva merged commit 708364d into next Jun 18, 2025
48 checks passed
@OS-giulianasilva OS-giulianasilva deleted the ROU-11978 branch June 18, 2025 15:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: core @ionic/core package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants