禁用的输入字段在 safari 中未正确呈现

Question

我创建了一个带有一些输入的基本 angular-material 表单，并通过 angular flex-layout 排列它们。

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

在 Safari 中，仅在加载禁用输入的表单时才会出现此问题。下面的截图说明了这个问题：

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

启用版本

禁用版本

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

我猜测某些 css 样式或 angular flex-layout 会产生这种行为，但我完全不知道如何确认这一点。

一旦我在设备上放大和缩小，输入就会按原样显示，这更加令人困惑。

很遗憾，我无法分享完整的代码，但我会更新 stackblitz 示例以尽可能地匹配代码。

有没有人遇到过类似的行为？ 在此先感谢您提供的任何信息，我已经为此花费了几天时间，不知道如何进行。

Answer 1

经过大量的试验和错误，事实证明这个错误只是在实际数据从服务器传入之前实例化和渲染一个空对象时引起的。

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

client: Client = new Client();

带有表单的组件被渲染，然后输入被http请求的结果覆盖。

由于某些原因，iOS Safari 无法正确计算高度，以防第一次渲染时输入为空。

因此，解决方案是查询对象是否存在，并且仅在有要显示的内容时才渲染它，所以一个简单的*ngIf 解决了这个问题。

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