固定标题在使用 iPhone/iOS 滚动时跳跃和闪烁

Question

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

问题是固定标题在滚动时会跳跃和闪烁。此问题仅在 iPhone/iOS 中可见。 （我用 iPhone8、iOS12.2 测试过），在安卓设备和桌面上都能完美运行。

我已经尝试了几种解决方法，例如将-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%;
           }