Проблема с пустым местом в сетке Kendo при прокрутке в Firefox после добавления функции “Наверх”

Вопрос или проблема

  <kendo-dialog Kendo Grid White Space Issue on Scroll in Firefox after Adding "Back to Top" Feature
="openProjectDialog ? 'Все проекты' : 'Список билетов'" 
                (close)="onClose()"
                [width]="'80%'" 
                [height]="'80%'" 
                class="overlapPopup">

    <!-- Раздел с текстом в бегающем формате -->
    <div class="marquee-wrapper" *ngIf="fullMarqueeText">
      <marquee behavior="scroll" direction="left" scrollamount="6" 
               [innerHTML]="fullMarqueeText">
      </marquee>
    </div>

    <!-- Раздел с содержимым сетки -->
    <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> Назад к началу
        </button>
      </div>

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

.table-grid-outer-scrollable {
  overflow: авто;
  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));
  }
}

Ответ или решение

Проблема с белыми пространствами в Kendo Grid при прокрутке в Firefox после добавления функции «Назад к верху»

Вам может показаться, что проблема появления белых пространств в Kendo Grid при прокрутке в браузере Firefox вызвана тем, что после добавления функции «Назад к верху», компоненты не динамируют высоко до конца. Данная проблема существует только в Firefox и не наблюдается в других браузерах, что может указывать на специфику реализации рендеринга в этом браузере.

Анализ кода

Рассмотрим предоставленный вами кусок кода:

1. Структура Kendo Dialog и Grid: Вы используете Kendo Dialog, который содержит Kendo Grid, размещенный в зависимом div с классом table-grid-outer-scrollable. К этому элементу применяется свойство overflow: auto, что позволяет элементу прокручиваться.

2. Настройка высоты: При использовании стиля max-height: calc(80vh - 100px);, у вас жестко задана максимальная высота контейнера. Это может привести к проблемам с расчетом высоты в Firefox, особенно при изменениях в DOM (например, при добавлении кнопки «Назад к верху»), что влияет на динамическое обновление высоты вашего грида.

3. Слушатели событий скролла: Использование addScrollListener, который добавляет событие прокрутки, также может влиять на поведение при скролле. В функции onScroll производится логика отображения кнопки «Назад к верху», но нет обработки состояния высоты грида при прокрутке.

Потенциальные решения

1. Обновление размеров: Попробуйте принудительно вызов обновления размеров грида при прокрутке или добавьте событие для изменения высоты, если это необходимо. Вы можете использовать метод resize вашего грида внутри обработчика события onScroll:

   public onScroll(): void {
      const scrollTop = this.scrollableContent.nativeElement.scrollTop;
      this.showScrollTopButton = scrollTop > 300;
   
      // Проверьте вызов resize для компонента Kendo Grid
      const grid = $('#scroll').data('kendoGrid');
      if (grid) {
          grid.resize();
      }
   }

2. Проверка стиля для разных браузеров: Может иметь смысл использовать специальные CSS стили для Firefox, чтобы убедиться, что он обрабатывает вашу сетку так же, как и другие браузеры. Например:

   @-moz-document url-prefix() {
      .table-grid-outer-scrollable {
          /* специфичные стили для Firefox */
      }
   }

3. Обратите внимание на z-index и наложение: Иногда белые пространства могут возникать из-за конфликтов z-index и наложений элементов. Проверьте, что все элементы вашего диалога и гридов имеют правильно установленные z-index, чтобы избежать визуальных проблем.

Заключение

По описанной вами проблеме можно сделать вывод, что корректировка обработки высоты Kendo Grid и добавление методов пересчета размера при прокрутке могут помочь устранить проблему возникновения белых пространств в Firefox. Обязательно тестируйте изменения в разных браузерах для получения объективных результатов. Если вышеуказанные решения не сработают, возможно, вам придется рассмотреть возможность обращения в службу поддержки Kendo для более глубокого анализа проблемы.