StyledComponents溢出：滚动不适用于iOS Safari

问题描述

我有一个可滚动的组件。它可以在ios Safari以外的所有设备上运行。在Safari上，它压缩所有内容以使组件具有零溢出。
这

应该看起来像这样（在所有其他浏览器上都这样）：

我尝试过-webkit-overflow-scrolling: touch;，但这没什么区别。
如果我设置了最小高度，则会将其设置为该高度，但无法滚动

<MenuBody height={height}>
        <SwappingText>I am swapping</SwappingText>
        <SwappingWrapper>
          <StyledSelect value={swapFromToken} onChange={handleSwapFromChange}>
            <option disabled selected>
              Select
            </option>
          </StyledSelect>
          <SwappingForText>for</SwappingForText>
          <StyledSelect value={swapToToken} onChange={handleSwapForChange}>
            <option disabled selected>
              Select
            </option>
          </StyledSelect>
        </SwappingWrapper>
        <SwapInputsWrapper>
          <InputWrapper>
            <TopWrapper>
              <InputLabelText>From</InputLabelText>
              {swapFromToken && (
                <TokenBalance onClick={populateFromInput}>
                  Available: {showTokenBalance('from')} {swapFromToken}
                </TokenBalance>
              )}
            </TopWrapper>
            <FakeInput>
              {getimage('from')}
              <SwapInput
                type="number"
                placeholder={'0'}
                value={swapFromValue}
                onChange={handleFromValueChange}
              />
            </FakeInput>
          </InputWrapper>
          <ArrowImageWrapper>
            <ArrowsImage src={arrows} alt="Arrows" onClick={swapTokens} />
          </ArrowImageWrapper>
          <InputWrapper>
            <TopWrapper>
              <InputLabelText>To</InputLabelText>
            </TopWrapper>
            <FakeInput>
              {getimage('to')}
              <SwapInput
                type="number"
                placeholder={'0'}
                value={swapTovalue}
                onChange={handleTovalueChange}
              />
            </FakeInput>
          </InputWrapper>
        </SwapInputsWrapper>
        {showModalVariations()}
        <PrivateSwapWrapper>
          <SwitchText>Make this swap private?</SwitchText>
          <Switch
            onChange={() => {
              setIsPrivateVisible(!isPrivateVisible);
            }}
            classes={{
              root: classes.root,switchBase: classes.switchBase,checked: classes.checked,track: classes.track,thumb: classes.thumb,}}
          />
        </PrivateSwapWrapper>
        {isPrivateVisible && (
          <WalletInputWrapper>
            <WalletInputLabel>Wallet Address</WalletInputLabel>
            <WalletInput
              placeholder={'What address can claim this swap'}
              onChange={handlePrivateAddress}
            />
          </WalletInputWrapper>
        )}
      </MenuBody>
    ```
```const MenuBody = styled.div`
  width: 100vw;
  padding-top: 20px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid #e8ebec;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f1f8fc;
  ${(props: ComponentTypes) => {
    const tall = props.height - 80;
    return css`
      height: ${tall}px;
    `;
  }}

const MenuBody = styled.div`
  width: 100vw;
  padding-top: 20px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  /* background-color: blue; */
  border-top: 1px solid #e8ebec;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* background-color: #f1f8fc; */
  ${(props: ComponentTypes) => {
    const tall = props.height - 80;
    return css`
      height: ${tall}px;
    `;
  }}
`;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）