Skip to content
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.

Sign up for GitHub

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

Jump to bottom

bug: ios, menu disappears on rtl mode when focusing element in menu #25192

Closed
5 of 7 tasks
yonatancohen opened this issue Apr 26, 2022 · 7 comments · Fixed by #25309
Closed
5 of 7 tasks

bug: ios, menu disappears on rtl mode when focusing element in menu #25192

yonatancohen opened this issue Apr 26, 2022 · 7 comments · Fixed by #25309
Labels
bug: external Bugs in non-Ionic software that impact Ionic apps (I.e. WebKit, Angular, Android etc) type: bug a confirmed bug report

Comments

@yonatancohen
Copy link

Prerequisites

Ionic Framework Version

  • v4.x
  • v5.x
  • v6.x
  • Nightly

Current Behavior

When doc type is in RTL mode, the menu open then auto close itself.

  • Only happens on the first toggle.

Expected Behavior

One click to open the menu.

Steps to Reproduce

Create a simple menu project, edit the <html> tag to <html lang="he" dir="rtl"> in the index page.

Code Reproduction URL

No response

Ionic Info

`Ionic:

Ionic CLI : 6.19.0 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 6.1.2
@angular-devkit/build-angular : 13.3.3
@angular-devkit/schematics : 13.3.3
@angular/cli : 13.3.3
@ionic/angular-toolkit : 6.1.0

Capacitor:

Capacitor CLI : 3.5.0
@capacitor/android : 3.5.0
@capacitor/core : 3.5.0
@capacitor/ios : 3.5.0

Utility:

cordova-res : not installed globally
native-run : 1.5.0

System:

NodeJS : v16.13.0 (/usr/local/bin/node)
npm : 8.1.3
OS : macOS Monterey
`

Additional Information

No response
@ionitron-bot ionitron-bot bot added the triage label Apr 26, 2022
@liamdebeasi liamdebeasi self-assigned this Apr 26, 2022
@liamdebeasi
Copy link
Member

Thanks for the issue. I tried reproducing this in a sidemenu Ionic starter app but was unable to reproduce the issue. Can you provide a GitHub repo I can use to verify this behavior?

@liamdebeasi liamdebeasi added the needs: reply the issue needs a response from the user label Apr 26, 2022
@liamdebeasi liamdebeasi removed their assignment Apr 26, 2022
@ionitron-bot ionitron-bot bot removed the triage label Apr 26, 2022
@yonatancohen
Copy link
Author

yonatancohen commented Apr 27, 2022 via email

@ionitron-bot ionitron-bot bot added triage and removed needs: reply the issue needs a response from the user labels Apr 27, 2022
@liamdebeasi liamdebeasi self-assigned this Apr 27, 2022
@liamdebeasi
Copy link
Member

Thanks, I can reproduce this. This appears to be a WebKit bug in iOS 15. I am unable to reproduce this in iOS 14 along with non-iOS platforms. I will look into reporting this issue to the WebKit team.

@liamdebeasi
Copy link
Member

I reported the issue to the WebKit team: https://bugs.webkit.org/show_bug.cgi?id=240582

Changing translate3d to translateX here seems to fix the issue: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/menu/menu.scss#L41

We should not need to do a 3d transform, so I will see if it is feasible to change this.

@liamdebeasi liamdebeasi changed the title bug: RTL menu bug: ios, menu disappears on rtl mode when focusing element in menu May 18, 2022
@liamdebeasi liamdebeasi added type: bug a confirmed bug report bug: external Bugs in non-Ionic software that impact Ionic apps (I.e. WebKit, Angular, Android etc) labels May 18, 2022
@liamdebeasi liamdebeasi removed their assignment May 18, 2022
@ionitron-bot ionitron-bot bot removed the triage label May 18, 2022
@liamdebeasi liamdebeasi mentioned this issue May 18, 2022
Merged
13 tasks
@liamdebeasi
Copy link
Member

Can you try the following dev build, and let me know if it resolves the issue?

npm install @ionic/angular@6.1.6-dev.11652891005.1ac88bcc

@liamdebeasi
Copy link
Member

Thanks for the issue. This has been resolved via #25309, and a fix will be available in an upcoming release of Ionic Framework.

Please feel free to continue testing, and let me know if you run into any issues.

liamdebeasi added a commit that referenced this issue May 19, 2022
@liamdebeasi
fix(menu): rtl menu no longer disappears on ios 15 (#25309)
6005431 
resolves #25192
This was referenced Jun 1, 2022
Closed
Closed
@ionitron-bot
Copy link

ionitron-bot bot commented Jun 18, 2022

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.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Jun 18, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
bug: external Bugs in non-Ionic software that impact Ionic apps (I.e. WebKit, Angular, Android etc) type: bug a confirmed bug report
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(menu): rtl menu no longer disappears on ios 15.4+ ionic-team/ionic-framework
2 participants
@liamdebeasi @yonatancohen