iOS、Windows 和 Android 上的按钮定位不同

Question

我有一个 span 有两个元素，input 和 svg。
我希望 svg 在 input 字段中垂直居中。

我有 3 台设备正在测试 PWA 的设计。

Windows 10 - Google Chrome
Android 6.0 - Google Chrome
iOS 12.+ - 野生动物园

在 Windows 和 Android 上它都是垂直居中的，只有 iOS 设备上没有。

有人知道这会解决什么问题吗？

反应组件：

<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) works only for the top of your app on iOS.
When you use env(safe-area-inset-top) it push down your app with the height of the 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;
`;

iOS、Windows 和 Android 上的按钮定位不同

Button positioning different on iOS then Windows and Android

css

reactjs

styled-components