Расположение кнопок на iOS отличается от Windows и Android

Question

У меня есть span, в котором есть 2 элемента: input и svg.
. Я хочу, чтобы svg располагался вертикально в поле input.

У меня есть3 устройства, на которых я тестирую дизайн моего PWA.

• Windows 10 - Google Chrome
• Android 6.0 - Google Chrome
• iOS 12. + - Safari

В Windows и Android он центрируется по вертикали, но не на устройстве iOS.

У кого-нибудь есть идеи, как это исправить?

React Component:

<StyledInputSpan>
  <StyledInput />
  <StyledClearButton />
</StyledInputSpan>

Стилизованный компонент:

export const StyledInput = styled.input`
  //Reset box-shadow
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  display: block;
  padding: 0.75em 2em 0.75em 0.75em; //Extra padding on the right for the clear button.
  font-size: 1em;

  //Hide the standard clear button.
  &[type=search]::-webkit-search-cancel-button {
    display: none;
  }
`;

export const StyledClearButton = styled.button`
  position: absolute;
  top: calc(2.8em - env(safe-area-inset-top)); //env() is for the nodge on iOS.
  right: 0;
`;

const StyledInputSpan = styled.span`
  display: flex;
  align-items: center;
`;

Answer 1

Выясните, что использование env(safe-area-inset-top) - это не то, что я искал.

env (safe-area-inset-top) работает только для верхней части вашего приложения на iOS.
Когда вы используете env(safe-area-inset-top), оно толкает ваше приложение на высоту nodge.

Я изменил свой компонент CSS / Styled на:

export const StyledInput = styled.input`
  //Reset box-shadow
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  position: relative;
  display: block;
  padding: 0.75em 2em 0.75em 0.75em; //Extra padding on the right for the clear button.
  font-size: 1em;

  //Hide the standard clear button.
  &[type=search]::-webkit-search-cancel-button {
    display: none;
  }
`;

export const StyledClearButton = styled.button`
  position: absolute;
  top: 27.5%;
  transform: translate(0, -50%);
  right: 0;
`;

const StyledInputSpan = styled.span`
  position: relative;
  display: flex;
  align-items: center;
`;