Fixed header is jumping and flickering when it's scrolled with iPhone/iOS

Question

I tried to fix a bug related to scrolling in iOS. Scrolling effect is applied to whole screen and there is a fixed header on the top.

The issue is that a fixed header is jumping and flickering when it's scrolled. This issue is only visible with iPhone/iOS. (I tested it with iPhone8, iOS12.2) and it's working perfectly with android device and desktop.

I already tried several workarounds like adding -webkit-overflow-scrolling: touch; and -webkit-transform: translate3d(0,0,0); to the fixed element. I referred to similar issues found on Stackoverflow.[1][2]

CSS is like the following.

.sidebar-mobile-transition {
    width: 100%;
    z-index: 0;
    background-color: white;
    position: fixed;
    bottom: 0;
    overscroll-behavior: none;
    overflow-y: scroll;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.sidebar-mobile-header {
    top: 0;
    position: fixed;
    height: 50px;
    width: 100%;
    background: black;
    color: white;
    z-index: 10;
    -webkit-transform: translate3d(0,0,0);
}

Is there any way to fix this issue?

Answer 1

Having a fixed header and scrollable content doesn't work in iOS scrolling. I found out that we should use position: absolute instead of position: fixed. Also we need to add -webkit-overflow-scrolling: touch; for content of sidebar.

It looks something like below..

.sidebar-mobile-header {
            top: 0;
            position: absolute;
            height: 50px;
            width: 100%;
            }

.sidebar-mobile-content {
            position: relative;
            overflow-y: scroll;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
            height: 100%;
           }