Css div with position fixed does not show on safari

Question

I have a navbar with position fixed, but in some ios devices it does not show, I googled it and I think it's an issue with the fixed position. So, I changed to absolute, but the navbar goes to the bottom of the page. Does someone know which css proprierty can I pass to centralized it on the top of the page? I'm already using "top:0"

here's the code:

<Header>
       <NewNavbar />
  </Header>

header styled component:

  export const Header = styled.header`
  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  display: flex;
  justify-content: space-between;
  align-items: center;

  // padding: 0 20px;
  min-height: 52px;
`;

I don't know if this could be another reason of why safari is not showing the navbar component, but the NewNavbar component also has some divs that only is displayed when it's in a mobile size

  {mobileSidebar ? (
          <Grid xs={6} item className={classes.mobile}>
            <Button onClick={toggleDrawerMobile(true)}>
              <MenuIcon />
            </Button>
          </Grid>
        ) : null}

UPDATE !!!! Thanks everyone! I could solve it by giving to the father div the height 100vh !!!

try to put position:sticky with top:0; see if that will work for you. — Crystal, Mar 30 '22 at 22:15
This appears to have already been answered: [position: fixed doesn't work on iPad and iPhone](https://stackoverflow.com/questions/4889601/position-fixed-doesnt-work-on-ipad-and-iphone) — Yogi, Mar 30 '22 at 22:20
@Crystal Thanks for the answer! , but it still showing on the bottom of the page — Mariana Monteiro, Mar 30 '22 at 22:29
@Roberto Thanks but I already had seen this post, apparently it does not have a answer to how to fix that — Mariana Monteiro, Mar 30 '22 at 22:30
@Roberto Is there a reason you didn't vote to close as a duplicate? — Heretic Monkey, Mar 30 '22 at 22:37
I wish i could see all your code. so we can see if there's something affecting it. — Crystal, Mar 30 '22 at 22:46

Css div with position fixed does not show on safari

0 Answers0