Переключатель Angular материала на панели расширения материала исчезает при прокрутке в iOS 13

Question

У меня есть accordion с некоторыми переключателями, которые отображаются только при первом ссылке sh и только если они отображаются на экране во время ссылки sh. Это означает, что на странице refre sh или при свертывании и развертывании элементов все будет в порядке. Но при прокрутке у вас будут элементы, которые не отображаются. Сверните один, и элементы, отображаемые на экране в этот момент, будут отрисованы, но все остальные будут иметь проблемы (включая те, которые были показаны изначально).

Эта ошибка возникает только в iOS 13 + (Safari или Chrome, не имеет значения) и не происходит на Android (в любом браузере), iOS до 12.xx, Chrome на рабочем столе или даже Safari на компьютере Ma c ( случаются другие ошибки, но не эта). Это также происходит в iOS Safari в режиме рабочего стола, поэтому я знаю, что это не связано с адаптивным кодом, а связано с тем, как iOS отображает компонент независимо от режима.

Кроме того, он по-прежнему функциональный, что означает, что по какой-то причине он может быть просто прозрачным.

Я искал префиксы CSS вендора и не нашел ни одного в используемых здесь классах, так что все CSS должны работать корректно в любом браузере ( для ясности удалены классы из приведенного ниже кода.

• Сразу после refre sh:

• Другие элементы, которые не были видны при обновлении sh время (обратите внимание, что значок V / ^ также исчезает):

Мой код сейчас выглядит следующим образом. Кажется, это странно заданная ошибка c, поэтому я постараюсь сделать этот код максимально приближенным к реальному.

Почти все элементы в столбцах также имеют matTooltip, включая радио button

<mat-accordion multi="true">
    <mat-expansion-panel expanded *ngFor="let item of items">
        <mat-expansion-panel-header>
            <mat-panel-title>
                <h3>
                    {{item.name}}
                </h3>
                <div>
                    <span>
                        {{item.code}}
                    </span>
                    <span>
                        Level {{item.level}}
                    </span>
                </div>
            </mat-panel-title>
        </mat-expansion-panel-header>
        <ng-template matExpansionPanelContent>
            <div *ngIf="item.subitems.length > 0; then withSubItems else withoutSubItems"></div>
            <ng-template #withSubItems>
                <div>
                    <caption>
                        Select One
                    </caption> 
                    <mat-radio-group>
                        <table mat-table [dataSource]="item.subitems">
                            <tr mat-header-row *matHeaderRowDef="columns" style="display: none;"></tr>
                            <tr mat-row *matRowDef="let subitems; columns: columns"></tr>
                            <ng-container matColumnDef="radioButton">
                                <th mat-header-cell *matHeaderCellDef>
                                    Sub-item
                                </th>
                                <td mat-cell *matCellDef="let subitem">
                                    <mat-radio-button value="{{subitem.code}}"
                                            [disabled]="shouldBeDisabled(subitem)"
                                            [checked]="subitem.isChecked"
                                            (click)="add(item, subitem, 'T')">
                                        <div>
                                            {{subitem.code}}
                                        </div>
                                    </mat-radio-button>
                                </td>
                            </ng-container>
                            <ng-container matColumnDef="info1">
                                <th mat-header-cell *matHeaderCellDef>
                                    Info 1
                                </th>
                                <td mat-cell *matCellDef="let subitem">
                                    <span>
                                        {{subitem.info1}}
                                    </span>
                                </td>
                            </ng-container>
                            <ng-container matColumnDef="info2">
                                <th mat-header-cell *matHeaderCellDef>
                                    Info 2
                                </th>
                                <td mat-cell *matCellDef="let subitem">
                                    <span>
                                        {{subitem.info2}}
                                    </span>
                                </td>
                            </ng-container>
                            <!-- etc. -->
                        </table>
                    </mat-radio-group>
                </div>
            </ng-template>
            <ng-template #withoutSubItems>
                <div>
                    There aren't any sub-items
                </div>
            </ng-template>
        </ng-template>
    </mat-expansion-panel>
</mat-accordion>

Это довольно раздражает, так как у меня нет устройства iOS для отладки, поэтому я вынужден внести изменения в тестовую среду, чтобы попросить тестировщика проверить, если он решил проблему.

Если это поможет, у этого компонента изначально были обычные HTML таблица и переключатели. В этот момент проблема происходила с названием. Я решил тогда переписать это. На этот раз, используя mat-panel-title, который не использовался, и использовал время, чтобы также поработать над столом, преобразовав его в row col вид таблицы из bootstrap.

. Это решило проблема для заголовка, но она перенесена на всю таблицу. Поэтому я решил снова переписать таблицу и преобразовать ее в mat-table. Это помогло, но теперь у радио-кнопки все еще есть проблема. Но, к сожалению, на этот раз перезапись радиокнопки в радиокнопку материала не сработала.

Значок v / ^ имел проблему с самого начала, и ни один из рефакторингов не затронул ее.

Спасибо