fix(modal): improve card modal background transition from portrait to landscape (#30551)

Issue number: resolves internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Currently, if you have multiple card modals open in portrait view and
then transition to landscape, the background will not be transformed
properly and will not cover the entire screen as expected.


https://github.com/user-attachments/assets/bb2c7015-adb6-4c3b-8bc5-13360275fcf4


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

Now, we're correctly targeting the right element and will transform it
as expected. This allows a more consistent UX for these transitions.



https://github.com/user-attachments/assets/fff72387-d78b-4df4-a234-d89b54f694c4



## Does this introduce a breaking change?

- [ ] Yes
- [X] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

[Relevant (broken) screen (main
branch)](https://ionic-framework-git-main-ionic1.vercel.app/src/components/modal/test/card?ionic:mode=ios)

[Relevant (fixed) screen (this
branch)](https://ionic-framework-git-fix-modal-landscape-background-ionic1.vercel.app/src/components/modal/test/card?ionic:mode=ios)

core/src/components/modal/animations/ios.transition.ts

@@ -72,22 +72,22 @@ export const portraitToLandscapeTransition = (
     // need to care about layering and modal-specific styles.
     const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
     const fromTransform = `translateY(-10px) scale(${toPresentingScale})`;
-    const toTransform = `translateY(-10px) scale(${toPresentingScale})`;
+    const toTransform = `translateY(0px) scale(1)`;
 
     presentingAnimation
-      .addElement(presentingElRoot.querySelector('.modal-wrapper')!)
+      .addElement(presentingEl)
       .afterStyles({
         transform: toTransform,
       })
       .fromTo('transform', fromTransform, toTransform)
-      .fromTo('filter', 'contrast(0.85)', 'contrast(0.85)'); // Keep same contrast for card
+      .fromTo('filter', 'contrast(0.85)', 'contrast(1)');
 
     const shadowAnimation = createAnimation()
       .addElement(presentingElRoot.querySelector('.modal-shadow')!)
       .afterStyles({
         transform: toTransform,
+        opacity: '0',
       })
-      .fromTo('opacity', '0', '0') // Shadow stays hidden in landscape for card modals
       .fromTo('transform', fromTransform, toTransform);
 
     baseAnimation.addAnimation([presentingAnimation, shadowAnimation]);
@@ -148,17 +148,8 @@ export const landscapeToPortraitTransition = (
 
     presentingAnimation
       .addElement(presentingEl)
-      .beforeStyles({
-        transform: 'translateY(0px) scale(1)',
-        'transform-origin': 'top center',
-        overflow: 'hidden',
-      })
       .afterStyles({
         transform: toTransform,
-        'border-radius': '10px 10px 0 0',
-        filter: 'contrast(0.85)',
-        overflow: 'hidden',
-        'transform-origin': 'top center',
       })
       .beforeAddWrite(() => bodyEl.style.setProperty('background-color', 'black'))
       .keyframes([
@@ -173,22 +164,21 @@ export const landscapeToPortraitTransition = (
     // to handle layering and modal-specific styles.
     const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
     const fromTransform = `translateY(-10px) scale(${toPresentingScale})`;
-    const toTransform = `translateY(-10px) scale(${toPresentingScale})`;
+    const toTransform = `translateY(0) scale(1)`;
 
     presentingAnimation
-      .addElement(presentingElRoot.querySelector('.modal-wrapper')!)
+      .addElement(presentingEl)
       .afterStyles({
         transform: toTransform,
       })
-      .fromTo('transform', fromTransform, toTransform)
-      .fromTo('filter', 'contrast(0.85)', 'contrast(0.85)'); // Keep same contrast for card
+      .fromTo('transform', fromTransform, toTransform);
 
     const shadowAnimation = createAnimation()
       .addElement(presentingElRoot.querySelector('.modal-shadow')!)
       .afterStyles({
         transform: toTransform,
+        opacity: '0',
       })
-      .fromTo('opacity', '0', '0') // Shadow stays hidden
       .fromTo('transform', fromTransform, toTransform);
 
     baseAnimation.addAnimation([presentingAnimation, shadowAnimation]);

core/src/components/modal/modal.tsx

@@ -1122,7 +1122,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
       wrapperEl.style.opacity = '1';
     }
 
-    if (presentingElement) {
+    if (presentingElement?.tagName === 'ION-MODAL') {
       const isPortrait = window.innerWidth < 768;
 
       if (isPortrait) {