Flickering / disappearing title with position: fixed in iOS 11

Question

I have a header with the following CSS:

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

I have an infinite scroll in the content container. In iOS 11, when I look at the title, it disappears for a second and then comes back again.

I tried the following fixes:

• transform: translate3d(0,0,0)

• transform: translateZ(0)

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

• I added viewport-fit="cover" and viewport-fit="contain" to the meta viewport tag. As suggested here .

• Also, none of the child elements of the header has position: fixed; in your CSS.
• I already tried the solutions by adding left: 0; also.
• Another solution I tried adds -webkit-overflow: hidden; to the body of the page.
• I also tried adding overflow-x:hidden; in the html tag of the page.

All of the above solutions did not work.

Answer 1

I recently struggled with this, and basically iOS doesn't like position: fixed in combination with scrolling.

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

I ended up:

position: absolute

Answer 2

Have you tried adding overflow-x: hidden and position: relative to the .header wrap .header ?

I don’t know if this is possible in your case, since you only separated the CSS .header class, so you may not have a parent to apply it, but I this answer here seems to work. Hope this helps!