Flickering/vanishing header with position:fixed in iOS 11

user_4272975 0
Viewed 1987

I have a header with following CSS:

.header{
  display: block;
  top: 0;
  position: fixed;
  width: 100%;
  max-width: 1320px;
  z-index: 10;
  box-sizing:border-box;
}

I have infinite scroll in the container of the content. In iOS 11, when I scroll the header vanishes for a second and then comes back again.

I have tried the following fixes:

  1. transform: translate3d(0,0,0)

  2. transform: translateZ(0)

  3. -webkit-transform: translate3d(0,0,0); -webkit-backface-visibility: hidden; -webkit-perspective: 1000;

  4. I have added viewport-fit="cover" and viewport-fit="contain" in the meta viewport tag too. As suggested here.

  5. Also none of the child elements of header have position: fixed; in their CSS.
  6. I have tried above solutions by adding left: 0; too.
  7. Another solution suggested that I have tried is adding -webkit-overflow: hidden; to the body of the page.
  8. I also tried adding overflow-x:hidden; to html tag of the page.

All the above solutions have not worked.

ios11 css-transforms viewport css ios
2 Answers

I fought with this recently and basically iOS doesn't like position: fixed combined with scrolling.

transform: translate3d(0,0,0) seems to work on iOS 12.x.x but causes my header to flicker when scrolling (which is another issue).

I ended up having:

position: absolute

user_2758820
Related