fix(menu): improve reliability of main content not being scrollable when menu opens (#28829)

Issue number: resolves #28399 --------- <!-- 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. --> As part of #26976 I fixed an issue where `pointer-events: none` was not applied until after the menu open gesture finishes. This resolved a bug where scrolling was latching after the menu gesture starts. However, I did not account for the edge case where scrolling latches _before_ `pointer-events: none` is applied in the DOM. Since scrolling has already latched then `pointer-events: none` does not change the scrolling behavior. This can happen if a user swipes up and to the right from the left edge of the screen. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - `overflow-y: hidden` is now applied to the scrollable content which will interrupt any scrolling when the menu is open. ## 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. --> Testing: This bug fixes a timing issue where scrolling latches on the main content as the menu tries to open. As a result, I am unable to write reliable automated tests for this. Reviewers should perform the following test on iOS and Android physical devices: 1. Open `src/components/menu/test/basic`. 2. Add enough elements to the main page content such that it scrolls (I added a list with items). 3. On each device, attempt to scroll the main content while also opening the menu on the starting edge of the screen. Scrolling on the main content should not happen if the menu opens. Dev build: `7.6.5-dev.11705341148.1a550d3b`

Author: liamdebeasi

core/src/css/core.scss

@@ -250,9 +250,36 @@ ion-card-header.ion-color .ion-inherit-color {
  cursor: pointer;
  touch-action: manipulation;
 
- // the containing element itself should be clickable but
- // everything inside of it should not clickable when menu is open
+ /**
+ * The containing element itself should be clickable but
+ * everything inside of it should not clickable when menu is open
+ *
+ * Setting pointer-events after scrolling has already started
+ * will not cancel scrolling which is why we also set
+ * overflow-y below.
+ */
  pointer-events: none;
+
+ /**
+ * This accounts for scenarios where the main content itself
+ * is scrollable.
+ */
+ overflow-y: hidden;
+}
+
+/**
+ * Setting overflow cancels any in-progress scrolling
+ * when the menu opens. This prevents users from accidentally
+ * scrolling the main content while also dragging the menu open.
+ * The code below accounts for both ion-content and then custom
+ * scroll containers within ion-content (such as virtual scroll)
+ */
+.menu-content-open ion-content {
+ --overflow: hidden;
+}
+
+.menu-content-open .ion-content-scroll-host {
+ overflow: hidden;
 }
 
 .ios .menu-content-reveal {