ios - 材质扩展面板中的 Angular 材质单选按钮在 iOS 13 中滚动时消失

Question

我有一个accordion带有一些单选按钮，它们仅在第一次刷新时显示，并且只有在刷新时它们才显示在屏幕上。这意味着，在页面刷新或折叠和展开项目时，这些都可以。但是滚动你会有项目没有被渲染。折叠一个，此时屏幕上显示的项目将被渲染，但其余所有项目都会出现问题（包括最初显示的项目）。

此错误仅发生在 iOS 13+（Safari 或 Chrome，无关紧要）上，不会发生在 Android（任何浏览器）、iOS 直到 12.xx、Chrome 桌面甚至 Mac 计算机上的 Safari（其他错误发生，但不是这个）。它也发生在桌面模式下的 iOS Safari 上，所以我知道它与响应式代码无关，但与 iOS 如何呈现组件有关，无论模式如何。

此外，它仍然可以正常工作，这意味着它可能出于某种原因是透明的。

我查找了供应商 CSS 前缀，但在此处使用的类中没有找到，因此所有 CSS 都有望在任何浏览器中正常工作（为清楚起见，从下面的代码中删除了类）。

• 刷新后：

• 刷新时不可见的其他项目（注意 V / ^ 图标也消失了）：

我现在的代码如下所示。这似乎是一个奇怪的特定错误，所以我会尽量让这段代码尽可能接近真实的东西。

几乎所有列中的项目也都有一个matTooltip，包括单选按钮

<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从引导程序转换为一种桌子。

这解决了标题的问题，但它移动到了整个表格。所以我决定再次重写表格并将其转换为mat-table. 它确实有帮助，但现在单选按钮仍然存在问题。但不幸的是，这次将单选按钮重写为材质单选按钮并不起作用。

v / ^ 图标从一开始就存在问题，并且没有任何重构影响它。

谢谢

标签： iosscrollangular-materialradio-buttonaccordion