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 Kendo Grid White Space Issue on Scroll in Firefox after Adding "Back to Top" Feature="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));
  }
}

You need to sign in to view this answers