fix(modal): support iOS card view transitions for viewport changes

[ShaneK]

Issue number: resolves #30296

---

What is the current behavior?

Currently, there is no support for moving between an iOS card view (mobile, portrait modal with presenting element) to a non-card view when the resolution changes (e.g., the device goes from a portrait layout to landscape). This causes issues both way because modals that should be card modals when the user transitions to a portrait view stay as non-card modals and modals that were card modals when they were opened but the user goes to landscape view end up with a black box stuck around the edges of the screen.

What is the new behavior?

With this change, we now fully support transitioning between the two modal views when the resolution changes. This should fix the issue where the background could become stuck and should be a nicer experience for users switching between the two orientations while using modals.

I also took the time to clean up the terminology in use here to refer to "mobile view" (as it was meant here) to be portrait view and the other view to be referred to as landscape view. I did this because I had accidentally mixed them up while working on this and I had to do a refactor to fix it, so I'm hoping that by clarifying the terminology now it helps prevent similar mistakes for others in the future.

Does this introduce a breaking change?

• Yes
• No

Other information

Relevant test screen

Dev build: 8.6.3-dev.11751378808.12cc4a5c

[vercel]

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	Jul 9, 2025 6:28pm

[mikaelkaron]

Just happened to scroll passed this issue and tried your example in firefox/desktop. I'm seeing a weird error that could (probably is) entirely unrelated to this fix but I felt that it would be worth mentioning.

• open the test screen in full screen mode
• click "card modal" button
• resize screen to trigger IOS card-view
• pull the modal card down (without releasing) and then bring it back up to the top
• resize screen back to full-screen
• modal is now stuck in the bottom (but with a ghost shadow where it should have been)
  
• resize back to mobile view
• modal is now hidden off-screen

since I've never really tried the IOS stuff on a desktop before I don't know if this is existing or a regression.

[ShaneK]

@mikaelkaron That's weird! This issue is still a work in progress, turns out there's a lot of issues here with nested cards I need to hammer out. This is far more complex than I was initially thinking it was, unfortunately. I'll try to see what's up with that too, hopefully it's part of some of the weirdness already ongoing. Thanks for trying it!

[brandyscarney]

Non-blocking questions on the implementation, but looks great!