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

[liamdebeasi]

Issue number: resolves #28737

---

What is the current behavior?

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?

• 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
• No

Other information

Dev build

7.6.3-dev.11703103144.148eb1f6

⚠️ Please test in a physical app too

Before/After Demo

main	branch
before-transition.mov	after-transition.mov

Screenshot Diffs

The menu-custom screenshot diffs (Example) 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, 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 which prevents content from flowing under the tab bar, so the translucent tab bar never worked with this layout.

[thetaPC]

LGTM, works great!