Kendo Grid White Space Issue on Scroll in Firefox after Adding "Back to Top" Feature

1. I'm facing an issue with the Kendo Grid where white spaces appear when scrolling in Firefox. The grid works fine in other browsers. This issue started occurring after I implemented a "Back to Top" feature. It seems that the grid is unable to calculate its height dynamically during scrolling, which leads to rendering issues. Below is the relevant part of my code:

<kendo-dialog [title]="openProjectDialog ? 'All Projects' : 'Ticket List'"
(close)="onClose()"
[width]="'80%'"
[height]="'80%'"
class="overlapPopup">

<!-- Marquee Text Section -->
<div class="marquee-wrapper" *ngIf="fullMarqueeText">
<marquee behavior="scroll" direction="left" scrollamount="6"
[innerHTML]="fullMarqueeText">
</marquee>
</div>

<!-- Grid Content Section -->
<div *ngIf="!openProjectDialog && !openGridDialog"
#scrollableContent
class="table-grid-outer table-grid-outer-scrollable"
id="scroll">

<div class="grid-container-panel" style="height: 100%;">
<button *ngIf="showScrollTopButton"
class="btn btn-secondary back-to-top"
(click)="scrollToTop()">
<i class="fas fa-arrow-up"></i> Back to Top
</button>
</div>

</div>
</kendo-dialog>
</div>```


.table-grid-outer-scrollable {
overflow: auto;
max-height: calc(80vh - 100px);
text-overflow: inherit;
}

@ViewChild('scrollableContent', { static: false }) scrollableContent: ElementRef;

ngAfterViewInit() {
$('#scroll').parent().addClass('custom-scroll');
this.addScrollListener();
}

public addScrollListener(): void {
setTimeout(() => {
if (this.scrollableContent) {
this.scrollableContent.nativeElement.addEventListener('scroll', this.onScroll.bind(this));
}
}, 100);
}

public onScroll(): void {
const scrollTop = this.scrollableContent.nativeElement.scrollTop;
this.showScrollTopButton = scrollTop > 300;
}

public scrollToTop(): void {
this.scrollableContent.nativeElement.scrollTo({ top: 0, behavior: 'smooth' });
}

ngOnDestroy(): void {
if (this.scrollableContent) {
this.scrollableContent.nativeElement.removeEventListener('scroll', this.onScroll.bind(this));
}
}

Continue reading...