bug: item-sliding, options don't display correctly in RTL mode on Firefox or Safari

[averyjohnston]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

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

Current Behavior

In core, a basic ion-item-sliding will not show its options properly when opened in Firefox or Safari in RTL mode. Interestingly, using the expandable prop causes the options to display somewhat when dragging far enough, but the text is positioned incorrectly.

Screencast from Firefox: https://user-images.githubusercontent.com/90629384/195179136-fda916dd-14ad-4b30-a5f4-3e801ac9f2c9.mp4

Expected Behavior

Screencast from Chrome: https://user-images.githubusercontent.com/90629384/195179307-1a31d302-7764-46c4-89e9-406097630444.mp4

Steps to Reproduce

Host core locally and open http://localhost:3333/src/components/item-sliding/test/basic?rtl=true in Firefox or Safari, then drag any item open.

Code Reproduction URL

http://localhost:3333/src/components/item-sliding/test/basic?rtl=true

Ionic Info

[WARN] You are not in an Ionic project directory. Project context may be missing.

Ionic:

   Ionic CLI : 6.18.1

Utility:

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

System:

   NodeJS : v16.13.0
   npm    : 8.1.0
   OS     : Windows 10

Additional Information

No response

[DwieDima]

I was also able to reproduce this on LTR.

[averyjohnston]

@DwieDima Do you have a Github repo I could look at? Checking in core again, I'm still only able to reproduce in RTL.

[DwieDima]

@amandaejohnston we have this issue in our project, which i cannot share, but i'll try to setup a reproduction repo asap!

[DwieDima]

@amandaejohnston is was able to reproduce this behavior, and found another issue, too:

Bug where options won't show properly:

• click the button "toggle sliding options"
• slide to left
• result: option on left slides to left, option on right slides to right
• reason: custom width for ion-item-option (see example.component.css)

Bug where slides won't lock into position, instead close immediately:

• click the button "toggle sliding options"
• slide to left.
• result: options will immediately close on release, instead lock into position.
• reason: dynamically change ion-item-options using *ngIf.

https://stackblitz.com/edit/angular-bo8fxh?file=src/app/example.component.html

Bildschirmaufnahme.2022-11-18.um.10.40.09.mov

EDIT

Issue "Bug where options won't show properly" can be fixed using parts:

ion-item-option::part(native) {
   width: 80px;
}

Issue "Bug where slides won't lock into position, instead close immediately" can be fixed using single ion-item-options and instead using *ngIf on each ion-item-option or group it using ng-content.

nevertheless, the question would be whether this behavior is intended in this way.

[thetaPC]

The fix has been applied through PR #27203.

[thetaPC]

The fix has been released in v7.0.6.

[ionitron-bot]

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.