修复了 header 在使用 iPhone/iOS 滚动时跳跃和闪烁的问题

Question

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

问题是固定的 header 在滚动时会跳跃和闪烁。此问题仅在 iPhone/iOS 时可见。（我用 iPhone8、iOS12.2 对其进行了测试）并且它与 android 设备和桌面完美配合。

我已经尝试了几种解决方法，例如将 -webkit-overflow-scrolling: touch; 和 -webkit-transform: translate3d(0,0,0); 添加到固定元素。我提到了在 Whosebug 上发现的类似问题。[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

具有固定的 header 和可滚动的内容在 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%;
           }

修复了 header 在使用 iPhone/iOS 滚动时跳跃和闪烁的问题

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

css

scroll

css-position

mobile-safari

ios