bug: `ion-item` slot="error" not visible in Safari

[luongtu996]

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

Current Behavior

The new slot "error" does not work on my ipad 8, and iphone 7.
i found

::slotted([slot=error])

allways display:none;

Expected Behavior

Items with the error slot should show up as expected.

Steps to Reproduce

Just try on real device

 <ion-item class="ion-invalid">
          <ion-label position="stacked">Name</ion-label>
          <ion-input></ion-input>
          <ion-note slot="error">Test</ion-note>
 </ion-item>

Code Reproduction URL

No response

Ionic Info

Ionic:

   Ionic CLI                     : 6.18.1 (.../.nvm/versions/node/v14.17.1/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.0.2
   @angular-devkit/build-angular : 13.1.2
   @angular-devkit/schematics    : 12.2.14
   @angular/cli                  : 13.1.2
   @ionic/angular-toolkit        : 5.0.3

Capacitor:

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

Utility:

   cordova-res (update available: 0.15.4) : 0.15.3
   native-run                             : 1.5.0

System:

   NodeJS : v14.17.1 (.../.nvm/versions/node/v14.17.1/bin/node)
   npm    : 7.19.0
   OS     : macOS Monterey

Additional Information

No response

[vildhjarta8]

+1. Not working for me.

#24445 (comment)

[luongtu996]

i have to force css for item

.html
<ion-item>
  <ion-label position="stacked">Email</ion-label>
   <ion-input></ion-input>
   <div slot="error">
     show error here 
   </div>
</ion-item>


global.scss
ion-item {
  &.item-interactive.ion-invalid{
    div[slot="error"] {
      display: block !important;
    }
  }
}

[averyjohnston]

Thanks for the issue. I'm going to close this as a duplicate of #24445. I know there was discussion about the ion-invalid class being the missing piece, and your example here has that already, but this seems like the best way to keep discussion tidy. Feel free to post additional details on your setup over in that thread. cc @sean-perkins

[sean-perkins]

Ok looks like this is a slightly different issue, but relates to the error slot not showing in Safari (due to some style ordering). I'm going to re-open this issue and update the title to reflect the bug.

I'll open a PR shortly that addresses this issue.