Safari中无法正确呈现禁用的输入字段

Question

我用一些输入创建了一个基本的角材料形式，并通过角柔性布局对其进行了排列。

除iOS设备上的Safari之外，该表单在所有浏览器中均呈现无问题。

在Safari中，仅当加载具有禁用输入的表单时才会出现此问题。以下屏幕截图说明了该问题：

当我启用输入并再次禁用它们时，它们将正确呈现。

启用的版本

禁用的版本

我试图创建一个演示行为here的stackblitz示例，但无法重现该问题。

我猜想某些CSS样式或有角度的弹性布局会产生这种现象，但是我绝对不知道如何确认这一点。

在设备上放大和缩小后，输入将按原样显示，这更加令人困惑。

不幸的是，我无法共享完整的代码，但是我将更新stackblitz示例以使其与代码尽可能接近。

有人遇到过类似的行为吗？ 在此先感谢您提供任何信息，我已经花了数天时间，对此一无所知。

Answer 1

经过大量的反复试验，结果表明，仅当在从服务器输入实际数据之前实例化并渲染一个空对象时才导致此错误。

显示的客户端已实例化，因此我可以安全地绑定到成员，而无需检查null / undefined。

client: Client = new Client();

呈现具有表单的组件，然后使用http请求的结果覆盖输入。

由于某些原因，iOS Safari无法正确计算高度，以防输入在首次呈现时为空。

因此，解决方案是查询对象是否存在，并仅在有显示内容时才对其进行渲染，因此简单的*ngIf解决了该问题。

这只是一种解决方法，但是如果其他人遇到此问题，希望对您有所帮助。