so the styling in the css={{....}} property gets applied in my browser, but not in Safari on my iPhone. How do i add styling for iOs Safari, and also how can i make it, so that the scrollbar doesn't disappear and is always visible?

The only style which seems to get applied on iPhone is the webkit-scrollbar-track witdh. (i tested by setting the width to 100px)

I already tried this and this, in order to make the scrollbar always visible, but with no success. Below is the code and images of the scroll component on iPhone and Google Chrome on my Mac.

I also tried using both sx={{....}} css={{....}} while testing. But no difference.

<MenuList
  variant={"outline"}
  bgColor={"#000000"}
  rounded={10}
  borderColor={"blue.200"}
>
  <Box
    css={{
      "&::-webkit-scrollbar": {
        width: "4px",
      },
      "&::-webkit-scrollbar-track": {
        width: "6px",
      },
      "&::-webkit-scrollbar-thumb": {
        background: "#8ccef0",
        borderRadius: "24px",
      },
    }}
    overflowX="auto"
    maxHeight="200px"
  >
    {coinsList
      .map(({ label, path }) => (
        <MenuItem
          pt={1}
          pb={1}
          key={path}
          as={Link}
          to={path}
          color={dropDownValue === label ? undefined : "blue.200"}
        >
          {label}
        </MenuItem>
      ))}
  </Box>
</MenuList>

Menu in Google Chrome on my Mac. Handlebar always visible and styled(blue color):

Menu in Safari on my iPhone. Handlebar only visible while scrolling and not styled(grey color, thinner, only track-width style gets applied):

[

[EDIT] While looking on the images after posting the question i noticed, that the whole menu is grey on mobile image. This is due to sending the image to my Mac using Telegram. It is actually the same blue color as the Chrome image, except for handlebar (just for clarification.)