bug: item fill property, label is not aligned in safari

[klaurtar]

Prerequisites

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

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x
• [ ] Nightly

Current Behavior

When developing on Safari and iOS, all IonSelects appear below the center of the IonItem in React. It differs from the look in Chrome and android and I have not figured out how to center it. The icon also does not animate when clicked like chrome does, to point downward when options are displayed.

https://user-images.githubusercontent.com/43356690/179074271-fbd4c729-abc2-4576-9b9b-7b5230fdc42c.mov

Expected Behavior

The Safari version should look centered, just like the chrome version. The triangle icon should also animate when clicked and the IonOptions appear.

https://user-images.githubusercontent.com/43356690/179074770-d5daff96-dd9e-47be-9101-20235d336e6e.mov

Steps to Reproduce

Create an IonModal that contains an IonItem with a floating position IonLabel and a IonSelect on Safari or iOS device.

Here is the code causing the error:

import React from 'react';
import { IonItem, IonLabel, IonSelect, IonSelectOption } from '@ionic/react';

import './OutlinedSelect.css';

const OutlinedSelect: React.FC<{
  className?: string;
  label: string;
  options: string[];
  selected: string | null;
  onChange: (newValue: string) => void;
  disabled?: boolean;
}> = ({ className, disabled, label, options, selected, onChange }) => {
  const classString = `outlined-select ${className || ''}`;

  return (
    <IonItem
      fill="outline"
      className={classString}
      disabled={disabled || options.length === 1}
    >
      <IonLabel position="floating" color="medium">
        {label}
      </IonLabel>
      <IonSelect
        key={selected}
        interface="popover"
        value={selected}
        onIonChange={(e) => {
          if (e.detail.value !== selected) {
            onChange(e.detail.value);
          }
        }}
      >
        {options.map((option) => (
          <IonSelectOption key={option} value={option}>
            {option}
          </IonSelectOption>
        ))}
      </IonSelect>
    </IonItem>
  );
};

export default OutlinedSelect;

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.20.1 Ionic Framework : @ionic/react 6.1.14

Capacitor:

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

Utility:

cordova-res : not installed globally native-run (update available: 1.6.0) : 1.5.0

System:

NodeJS : v14.19.1 ( npm : 6.14.16 OS : macOS Monterey

Additional Information

No response