I have encountered an unusual issue in my Angular 13 + Bootstrap 5 application. When accessing a scrollable page on small screen devices, the scrolling function does not work properly and causes the page to flicker.
I observed that this problem does not occur when I manually refresh the page.
I have kept my CSS relatively simple and clean with no complex elements added. The only modification I made was using the scrollPositionRestoration set to top in the app-routing.module as shown below:
@NgModule({
imports: [
RouterModule.forRoot(routes, { scrollPositionRestoration: 'top' })
],
exports: [
RouterModule
]
})
export class AppRoutingModule { }
Here is some code snippets:
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>
No additional CSS classes other than Bootstrap have been included at this time.
I have also attempted to remove the scrollPositionRestoration behavior, but the issue persists unchanged.
This glitch occurs consistently across all browsers tested including Safari, Chrome, and Firefox.
You can replicate this problem by cloning, building, and serving this repository.
Any suggestions would be greatly appreciated. Thank you!
https://i.stack.imgur.com/uDPYt.gif https://i.stack.imgur.com/ZBJZy.gif