bug: ion-item in iOS16 and RTL view

[muhamed87]

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

v8.x

Current Behavior

There are an issue we are facing specially in iOS 16, even this issue is not in the iOS 17 nor iOS 18

We already upgraded from ionic 6 to ionic 8, and currently testing after upgrade but for devices with iOS 16 we faced that ion-items not read the RTL styles applied through the ionic styles

Expected Behavior

If you can update the.item-inner to have part attribute so we can apply fixes and styles to it.
Or you can make another solution to use padding-inline-start and padding-inline-end instead of padding-right and padding-left for shadow dom elements

Steps to Reproduce

1. Run the XCode and open the simulator for iphone 14 and ios 16.1
2. Open any demo app that have a screen including ion-item
3. app should be in RTL view
4. View the issue of the inner border or add an icon inside the ion-item with slot start you will see the icon is connected to the right border

Code Reproduction URL

No URL

Ionic Info

Ionic:

Ionic CLI : 6.18.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : not installed
@angular-devkit/build-angular : 18.2.11
@angular-devkit/schematics : 18.2.11
@angular/cli : 18.2.11
@ionic/angular-toolkit : 6.1.0

Capacitor:

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

Cordova:

Cordova CLI : 12.0.0 ([email protected])
Cordova Platforms : none
Cordova Plugins : no whitelisted plugins (0 plugins total)

Utility:

cordova-res : 0.15.4
native-run : 2.0.1

System:

NodeJS : v20.9.0 (/usr/local/bin/node)
npm : 10.1.0
OS : macOS
Xcode : Xcode 16.2 Build version 16C5032a

Additional Information

No response

[AnasAlSabbagh]

@ionic-team
We are encountering the same issue on iOS 15, where the provided CSS rules for handling RTL padding are not applied correctly. Specifically, the following styles for .item-native and .item-inner do not work as expected:

For .item-native:

:host-context([dir=rtl]) .item-native {
padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px));
padding-left: var(--padding-end);
}

@supports selector(:dir(rtl)) {
.item-native:dir(rtl) {
padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px));
padding-left: var(--padding-end);
}
}
For .item-inner:

:host-context([dir=rtl]) .item-inner {
padding-right: var(--inner-padding-start);
padding-left: calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end));
}

@supports selector(:dir(rtl)) {
.item-inner:dir(rtl) {
padding-right: var(--inner-padding-start);
padding-left: calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end));
}
}

Observations:
The issue appears to stem from iOS 15 not supporting these styles reliably.
We confirmed that this problem does not occur in Ionic version v7.5.8, where padding-inline-start and padding-inline-end properties were used instead.
As seen in this commit:
ed040b0

The use of padding-inline-start and padding-inline-end worked well across browsers and platforms, including iOS 15. Reverting to these properties or providing a fallback for older iOS versions could resolve the issue.

Would it be possible to reintroduce padding-inline-start and padding-inline-end for better cross-platform support, or suggest an alternative workaround?