fix(nav, router-outlet): ios page transition does not cover menu on l…

…arger screens (#28745)

Issue number: resolves #28737

---------

<!-- 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. -->

In #28246 we removed
the overflow on Nav and Router Outlet to allow content to flow outside
of these containers. This allows the translucent tab effect to work
(otherwise content would be clipped and there would be no translucency).
However, this had the unintended side effect of causing page transitions
to flow outside of these components. This is most noticeable on larger
displays when using SplitPane because the page can cover the menu
mid-transition.

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

- Overflow is no longer allowed on the main content. I originally set
the overflow on the router outlet/nav itself, but that caused the
translucent tab bar behavior to regress. Since this issue only happens
with split pane, I decided to apply the fix there.

## 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/.github/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. -->

### Dev build
`7.6.3-dev.11703103144.148eb1f6`

⚠️ Please test in a physical app too

### Before/After Demo

| `main` | branch |
| - | - |
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/2f3f0d74-9a7e-4ebe-b58a-6e1a6ea3636e"></video>
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/cdbf8fb5-e217-48cf-8c1e-4bdecee4de4c"></video>
|

### Screenshot Diffs

The `menu-custom` screenshot diffs
([Example](https://github.com/ionic-team/ionic-framework/pull/28745/files))
are correct. By adding `overflow: hidden`, the box shadow from the
"Content" header no longer flows outside of the container.

The menu [border on MD has an opacity of
0.18](https://github.com/ionic-team/ionic-framework/blob/e5226016a0f0b066a7bd7fc9997f905d3b87fbc4/core/src/components/menu/menu.md.vars.scss#L7),
so the border color was mixing with the color of the box shadow from the
header.

Since the shadow no longer flows outside of the container, the border
color does not mix with the box shadow color.

### Does this break translucent tabs when the split pane is inside of a
tab?

No. The [split pane has `contain: strict`
set](https://github.com/ionic-team/ionic-framework/blob/e5226016a0f0b066a7bd7fc9997f905d3b87fbc4/core/src/components/split-pane/split-pane.scss#L24)
which prevents content from flowing under the tab bar, so the
translucent tab bar never worked with this layout.

---------

Co-authored-by: ionitron <hi@ionicframework.com>

core/src/components/split-pane/split-pane.scss

@@ -49,6 +49,16 @@
 
 :host(.split-pane-visible) ::slotted(.split-pane-main) {
   flex: 1;
+
+  /**
+   * Content can overflow outside of a router outlet
+   * or a nav container to allow for the translucent
+   * tab bar effect to work. However, this can cause
+   * iOS page transitions to flow outside of the container
+   * and overlap the menu on larger viewports. As a result,
+   * we disable the overflow when that is the case.
+   */
+  overflow: hidden;
 }
 
 :host(.split-pane-visible) ::slotted(.split-pane-side:not(ion-menu)),