Angular 8+Bootstrap 4.6 iPad Safari竖屏滚动时导航栏消失无法复现问题

问题根因 #

该问题是iPad Safari竖屏模式特有的兼容性问题，由两个原因共同导致：

1. 滚动监听指令的视口高度判断逻辑不适配Safari动态视口规则，向上滚动时不会触发移除nav-up类的逻辑
2. Safari的合成层渲染bug，导航栏回到可视区域后未触发重绘，导致显示空白

代码修改 #

1. 修正滚动逻辑（hide-nav.directive.ts） #

将hasScrolled方法的判断条件替换为适配Safari的版本：

private hasScrolled() {
    const st = this.winRef.nativeWindow.pageYOffset;
    if (Math.abs(this.lastScrollTop - st) <= this.delta) return;

    if (st > this.lastScrollTop && st > 80) {
        // 向下滚动超过80px隐藏导航
        this.el.nativeElement.classList.add('nav-up');
    } else {
        // 向上滚动直接显示导航，无需额外判断
        this.el.nativeElement.classList.remove('nav-up');
    }
    this.lastScrollTop = st;
}

新增滚动结束兜底逻辑，避免Safari丢失scroll事件：

// 类内新增变量
private scrollEndTimer: number | null = null;

// 修改滚动监听方法
@HostListener('window:scroll', ['$event']) 
hideNav(event: Event) {
    this.didScroll = true;
    // 滚动结束后200ms兜底执行一次逻辑
    if (this.scrollEndTimer) clearTimeout(this.scrollEndTimer);
    this.scrollEndTimer = window.setTimeout(() => {
        this.hasScrolled();
    }, 200);
}

2. 修复Safari渲染问题（.scss） #

给导航栏新增强制GPU渲染的属性，解决渲染空白问题，同时将position改回fixed：

.navbar {
    position: fixed;
    // 新增以下2个属性
    transform: translateZ(0);
    will-change: top;
    // 保留原有其他属性不变
}

以上修改完成后即可兼容iPad Safari竖屏模式，导航栏向上滚动时会正常显示。

内容的提问来源于stack exchange，提问作者MF Luder