fix(menu): rtl menu no longer disappears on ios 15.4+

[liamdebeasi]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
  • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

Issue URL: resolves #25192

There is a bug in the CSS Containment implementation in WebKit where focusing elements after an animation in RTL will cause the element to disappear.

When you open ion-menu, we focus the container element. Browsers such as WebKit will attempt to focus the first focusable element inside of ion-menu. When this happens, the WebKit bug kicks in and the menu disappears.

For some reason, this only happens when the animated element is translated using a translate3d. Using a 2d transform does not reproduce the issue.

Our translate3d usage here was added back in Ionic v3: ionic-team/ionic-v3@b31ab1b

At the time, translate3d was usually needed to force the browser to use hardware acceleration when animating the menu. This is no longer needed, and we are forcing the browser to do additional work when it does not need to.

What is the new behavior?

• Replaced translate3d with a translateX for the.menu-inner element.

Does this introduce a breaking change?

• Yes
• No

Other information

Dev build: 6.1.6-dev.11652891005.1ac88bcc