-
Notifications
You must be signed in to change notification settings - Fork 13.4k
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
IonPage
animates 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
.