'Scrolling is flickering when routing to new page in Angular

I am experiencing a weird behaviour in my Angular 13 + Bootstrap 5 App. On small screen size devices, when I visit a page that is supposed to scroll, the scrolling is not working at all and the page start flickering.

I've noticed that this problem is not happening when I force the page to refresh.

I've made nothing too complicated and my css is still almost clean.

The only thing I'm doing is use the scrollPositionRestoration to top in the app-routing.module like this:

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

Here some code:

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>

Fon now, no other CSS classes have been used other than Bootstrap.

I've also tried without the scrollPositionRestoration behaviour but nothing is changed.

This issue is reproducible on all the browser I've tested: Safari, Chrome, Firefox.

The issue can be reproduced cloning, building and serving this repo.

Could someone please suggest? Thanks!

scrolling-bug.gif scrolling-bug-no-header

htmlcssangulartwitter-bootstrapwindowssecuritywinapiprocessrights


Solution 1:[1]

Sticky Headers are known to cause that issue.

Try adding to your header in your css

{
  -webkit-backface-visibility: hidden;
}

Here are some good articles that may help you 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

Solution 2:[2]

This has worked for me in recent days with a similar issue

html {
   scroll-behavior: smooth;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Steve020
Solution 2 JDawwgy

Related Questions