Question

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

此错误仅在iOS 13+（Safari或Chrome，无关紧要）上发生，并且在Android（任何浏览器），iOS 12.xx之前的iOS，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 / ^图标自开始就出现问题，并且没有任何重构对其造成影响。

谢谢

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

0 个答案: