Медленные переходы компонента MatAccordion в Internet Explorer 11 - PullRequest
Новая
       8

Медленные переходы компонента MatAccordion в Internet Explorer 11

0 голосов
/ 13 декабря 2018

В моем приложении Angular есть форма с длинным списком флажков.Чтобы сделать интерфейс более понятным, параметры представлены в диалоге (с использованием Material MatDialog) и далее разделены на разные категории с помощью компонента аккордеона (MatAccordion).

Пользователь может перемещаться по категориямс помощью кнопок «предыдущий» и «следующий» внизу каждого MatExpansionPanel, как в примере в документации по материалам . 

<mat-accordion [formGroup]="formGroup" class="aligned-accordion-descriptions">

  <mat-expansion-panel [expanded]="step === 0" (opened)="setStep(0)" (afterExpand)="scrollToCurrentStep()">
    <mat-expansion-panel-header>
      <mat-panel-title>Options</mat-panel-title>
      <mat-panel-description>{{categories.cat1.selected}} / {{categories.cat1.totalItems}}</mat-panel-description>
    </mat-expansion-panel-header>

    <div class="flex-row" style="align-items: baseline;">
      <h2>Category 1</h2><span>Category 1 caption</span>
    </div>

    <div class="options-list">
      <checkbox-input findControlByName="OPTION1"><span>Option 1</span></checkbox-input>
      (...)
    </div>

    (...)

    <mat-action-row>
      <button type="button" mat-button (click)="prevStep()" disabled>Previous</button>
      <button type="button" mat-button (click)="selectAllFlagsOfCategory('cat1')">Select All</button>
      <button type="button" mat-button (click)="nextStep()">Next</button>
    </mat-action-row>

  </mat-expansion-panel>

  (...)

</mat-accordion>

Это хорошо работает в Chrome и Firefox, но в Internet Explorer 11 - который мне, к сожалению, приходится поддерживать - всегда есть небольшая задержка после нажатия кнопки «Далее» до расширения следующей MatExpansionPanel.

Отключение анимации (см. Ниже) не сильно помогло, равно как и удаление кода, который наблюдает за изменениями в флажках, которые могут повлиять на производительность. 

<mat-accordion [formGroup]="formGroup" [@.disabled]="true" class="aligned-accordion-descriptions">

Когда я открываюПример из документации в IE, кажется, все в порядке.У меня сложилось впечатление, что задержка зависит от высоты развернутого MatExpansionPanel - когда у него 10 или более флажков, он кажется намного медленнее по сравнению с короткими панелями.

Есть ли способулучшить пользовательский опыт для пользователей IE, не слишком мешая опыту для большинства?

...