使用iPhone / iOS滚动时，固定标题会跳跃并闪烁

Question

我试图修复与iOS中滚动相关的错误。滚动效果应用于整个屏幕，顶部有一个固定的标题。

问题是固定标题在滚动时会跳跃并闪烁。此问题仅适用于iPhone / iOS。 （我用iPhone8，iOS12.2进行了测试），它与Android设备和桌面完美配合。

我已经尝试了几种解决方法，比如将-webkit-overflow-scrolling: touch;和-webkit-transform: translate3d(0,0,0);添加到固定元素中。我提到了Stackoverflow.[1][2]上发现的类似问题

CSS如下所示。

.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);
}

有什么方法可以解决这个问题吗？

Answer 1

具有固定标题和可滚动内容在iOS滚动中不起作用。我发现我们应该使用position: absolute而不是position: fixed。我们还需要为侧边栏的内容添加-webkit-overflow-scrolling: touch;。

它看起来像下面..

.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%;
           }