Repository navigation
bug: Viewport changes in an IonPage containing a card type IonModal cause an unwanted IonPage animation #30679
Description
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.7.3
Current Behavior
Changing the viewport layout (switching between landscape an portrait mode in mobile devices or between mobile and desktop mode in the browser devtools) triggers the presentingElement IonPage animation used when a Card Modal is opened (leaning back into the background) although the modal was never opened.
When the modal is opened the animation works fine. It seems like Ionic detects the viewport change and tries to adapt the card modal and IonPage acting as presenting element, whether it is open (correct) or closed (unwanted behavior). This only occurs in IonPage's that contain a Card Modal.
You can watch this glitch in the following video:
Screencast.from.11-09-25.10.56.55.webm
I have also created a stackblitz sandbox with a minimal project to reproduce the problem seen in the video:
https://stackblitz.com/edit/laa3hcpx-qkdepaut
Expected Behavior
If the modal is not opened, viewport changes should not trigger the leaning back animation in the presentingElement IonPage that contains the Card Modal.
Steps to Reproduce
- Set up an Ionic React project with an IonPage containing a Card Modal or test it in this sandbox
- Change the viewport dimensions by either:
-- Switching between landscape and portrait modes in mobile devices
-- Switching between landscape and portrait modes in the browser devtools.
-- In Android devices focusing on the IonSearchBar also triggers the error since the virtual keyboard changes the viewport. - See how the
IonPageanimates as if a CarModal is being opened, leaning back, and it stays that way until you open and close the modal or restart the app.
Code Reproduction URL
https://stackblitz.com/edit/laa3hcpx-qkdepaut
Ionic Info
[WARN] You are not in an Ionic project directory. Project context may be missing.
Ionic:
Ionic CLI : 7.2.1
Utility:
cordova-res : not installed globally
native-run : not installed globally
System:
NodeJS : v22.19.0
npm : 11.5.2
OS : Linux 6.8
Additional Information
Please mind that i am only using the Ionic Components in an existing React Project. I am not using Capacitor or any of the other native features. I'm using Ionic version 8.7.3.
Activity
[-]bug: Viewport changes in an IonPage containing a Card Ion Modal causes and unwanted IonPage animation[/-][+]bug: Viewport changes in an IonPage containing a Card IonModal causes and unwanted IonPage animation[/+][-]bug: Viewport changes in an IonPage containing a Card IonModal causes and unwanted IonPage animation[/-][+]bug: Viewport changes in an ```IonPage``` containing a Card ```IonModal``` causes and unwanted ```IonPage``` animation[/+][-]bug: Viewport changes in an ```IonPage``` containing a Card ```IonModal``` causes and unwanted ```IonPage``` animation[/-][+]bug: Viewport changes in an ```IonPage``` containing a Card ```IonModal``` causes an unwanted ```IonPage``` animation[/+][-]bug: Viewport changes in an ```IonPage``` containing a Card ```IonModal``` causes an unwanted ```IonPage``` animation[/-][+]bug: Viewport changes in an ```IonPage``` containing a card type ```IonModal``` cause an unwanted ```IonPage``` animation[/+]thetaPC commentedon Sep 26, 2025
Thank you for submitting the issue!
I was able to replicate the issue on Chrome, Edge, and Safari. There's no issue on Firefox. We'll need to investigate further to determine the cause.
rendom commentedon Oct 23, 2025
Any update or workaround? Similar issues with ionic/vue.
rendom commentedon Oct 24, 2025
handleViewTranslation is triggered on window resize (if mode is iOS) and its starting the transitionAnimation even if the modal is closed. this.currentViewIsPortrait is undefined so its triggered even if the orientation is changed or not.
AkhmetKG commentedon Oct 24, 2025
We have a similar issue with ionic/angular. Hopefully, this will be fixed soon.
scr2em commentedon Oct 27, 2025
Any updates?
akozyritskiy commentedon Oct 28, 2025
We have encountered the same issue in our angular application also ..
Any updates on when this will be fixed?
Pablosornp commentedon Dec 11, 2025
This must be affecting more users. We had to replace all CarModals with SheetModals because of this issue. Is there an estimated investigation timeline?
ShaneK commentedon Dec 29, 2025
Hey! Sorry, this was a massive oversight on my part. I have a very simple PR up that will fix it (but may not be merged until after our team is back from holiday vacations).
If you'd like to try it now, there's a dev build here:
fix(modal): prevent card modal animation on viewport resize when moda…
ShaneK commentedon Dec 31, 2025
The fix for this was released today in v8.7.16. Thanks for the report!
fix(modal): prevent card modal animation on viewport resize when moda…
ionitron-bot commentedon Jan 30, 2026
Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.