New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
bug: content is scrollable when opening menu on ios #28399
Comments
Thanks, I can reproduce this. Our testing focused around Chromium-based browsers, but it looks like there is a slight behavior difference with WebKit browsers. Worth noting that I can reproduce this back to iOS 15 too, so it doesn't look like this regressed in WebKit at all either. Using |
Here's a dev build with a proposed fix if you are interested in testing: |
Thank you @liamdebeasi! I will check it out |
…hen 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`
Thanks for the issue. This has been resolved via #28829, and a fix will be available in an upcoming release of Ionic Framework. Feel free to keep testing the dev build, and let me know if you run into any issues. |
Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out. |
Prerequisites
Ionic Framework Version
v7.x
Current Behavior
I'm able to reproduce the issue #21193 on my iPhone with a fresh project created using ionic start using @ionic/angular@7.5.1
But this should be fixed on PR #26976, so I'm opening this issue.
Expected Behavior
To achieve the desired result, I added 'overflow-y: hidden' to the 'menu-content-open' class in my global.scss file. If necessary, I'd be happy to submit a pull request to include this change in core.scss as well.
global.scss
Steps to Reproduce
IMG_0241.MP4
Code Reproduction URL
https://github.com/arthurrmp/sidemenu-test
Ionic Info
Ionic:
Ionic CLI : 7.1.1 (/Users/arthur/.nvm/versions/node/v18.16.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 7.5.1
@angular-devkit/build-angular : 16.2.7
@angular-devkit/schematics : 16.2.7
@angular/cli : 16.2.7
@ionic/angular-toolkit : 9.0.0
Capacitor:
Capacitor CLI : 5.5.0
@capacitor/android : not installed
@capacitor/core : 5.5.0
@capacitor/ios : 5.5.0
Utility:
cordova-res : not installed globally
native-run : 1.7.3
System:
NodeJS : v18.16.0 (/Users/arthur/.nvm/versions/node/v18.16.0/bin/node)
npm : 9.5.1
OS : macOS Unknown
Additional Information
No response
The text was updated successfully, but these errors were encountered: