css - justify-content: space-between 无法在 Safari 移动最新版本中进行初始渲染

Question

我正在使用 next.js 开发一个 Web 应用程序，并且在移动设备上的 Safari 中，我的 react 组件中的 flexbox 样式属性在初始渲染时没有正确定位元素。我必须实际单击菜单按钮，然后它似乎正确地向右移动。请参阅下面的图片和代码。为什么会这样？在其他所有浏览器的移动设备上都可以正常工作。

 <Flex
        borderBottom="1px solid"
        borderBottomColor="gray.200"
        height="72px"
        alignItems="center"
        position="relative"
        paddingLeft={6}
        paddingRight={6}
        justifyContent="space-between"
      >
        <Text>{title}</Text>
        <Actions>{actions}</Actions>
      </Flex>