Блог

Я попытался использовать antdesign drawer в react, и он не прокручивается должным образом в safari. В настоящее время мой код выглядит так.

 <Drawer
      placement="right"
      closable={!!fullCheckout}
      onClose={() => setVisible(false)}
      visible={visible}
      getContainer={false}
      style={{
        position: "absolute",
        height: `calc(100vh - ${view === "MobileView" ? "50px" : "55px"})`,
        top: `${view === "MobileView" ? 0 : "55px"}`,
      }}
      width={fullCheckout ? "100%" : 455}
    >
<CheckoutDrawContainer>
<TopContainer />
<BottomContainer />
</CheckoutDrawContainer>
</Drawer>
 

Проблема в том, что прокрутка не работает должным образом в Safari, iphone.

 export const CheckoutDrawerContainer = styled.div`
  display: flex;
  flex-direction: column;
  position: relative;
  -webkit-overflow-scrolling: touch !important;
  height: ${({ view }) => (view !== "MobileView" ? "calc(100vh - 50px)" : "")};
`;

export const CheckoutDrawerTopContainer = styled.div`
  background-color: ${primary[0]};
  height: 258px;
  padding: 0 21px;
  padding-top: 27px;
  z-index: 9;
`;

export const CheckoutDrawerBottomContainer = styled.div`
  background-color: white;
  padding: 0 21px;
  padding-top: 80px;
  height: 500px;
`;
 

Я думаю, что это связано vh с safari, iphone.
Заранее спасибо