html - 路由到 Angular 中的新页面时滚动闪烁

Question

我在 Angular 13 + Bootstrap 5 应用程序中遇到奇怪的行为。在小屏幕设备上，当我访问一个应该滚动的页面时，滚动根本不起作用并且页面开始闪烁。

我注意到当我强制刷新页面时，这个问题没有发生。

我没有做任何太复杂的事情，我的 CSS 仍然几乎是干净的。

我唯一要做的就是在 app-routing.module 中使用 scrollPositionRestoration 到 top，如下所示:

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { scrollPositionRestoration: 'top' })
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule { }

这里是一些代码:

header.html

<div class="container sticky-top bg-white">
    <div class="row">
        <div class="col-12">
            <ws-navigation-bar></ws-navigation-bar>
        </div>
    </div>
</div>

container-template.html

<ws-header></ws-header>

<div class="container">
    <div class="row">
        <div class="col-12">
            <router-outlet></router-outlet>
        </div>
    </div>
</div>

<ws-footer></ws-footer>

blog-page.html

<div class="row">
    <div class="col-12">
        <wc-lib-page-title [pageTitle]="pageTitle"></wc-lib-page-title>
    </div>
</div>

<div class="row">
    <div class="col-12 text-center">
        <wc-lib-spinner [isLoading]="isLoading"></wc-lib-spinner>
    </div>
</div>

<div class="row">
    <div class="col-12 col-md-4">

    </div>

    <div class="col-12 col-md-8">

        <div class="row" *ngIf="blogPostItems.length===0 && isLoading===false">
            <div class="col-12">
                <p>No post yet!</p>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div *ngFor="let post of blogPostItems; index as i; trackBy: identifyItem">
                    <ws-post-card [id]="post.id" [postTitle]="post.title" [author]="post.author.displayName"
                        [published]="post.published" [content]="post.content" [replies]="post.replies.totalItems">
                    </ws-post-card>
                </div>
            </div>
        </div>
    </div>

</div>

现在，除了 Bootstrap 之外，没有使用其他 CSS 类。

我也尝试过不使用 scrollPositionRestoration 行为，但没有任何改变。

此问题可在我测试过的所有浏览器上重现:Safari、Chrome、Firefox。

问题可以通过克隆、构建和服务重现this repo 。

有人可以推荐一下吗？谢谢!

Answer 1

众所周知，粘性 header 会导致该问题。

尝试在您的 css 中添加到您的标题

{
  -webkit-backface-visibility: hidden;
}

这里有一些可能对您有所帮助的好文章https://developer.apple.com/library/archive/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Using2Dand3DTransforms/Using2Dand3DTransforms.html#//apple_ref/doc/uid/TP40008032-CH15-SW40 .

https://www.angularfix.com/2021/10/header-shrinks-on-scroll-but-flickering.html