禁用的输入字段在 safari 中无法正确呈现
Disabled input fields are not rendered properly in safari
我创建了一个带有一些输入的基本 angular-material 表单，并通过 angular flex-layout 对它们进行了排列。
除 iOS 设备上的 Safari 浏览器外，表单在所有浏览器中呈现都没有任何问题。
在 Safari 中，只有在加载禁用输入的表单时才会出现此问题。以下屏幕截图说明了问题：
当我启用输入并再次禁用它们时，它们会正确呈现。
启用版本
禁用版本
我试图创建一个演示行为的 stackblitz 示例 here，但我无法重现该问题。
我猜测某些 css 样式或 angular flex-layout 可能会产生这种行为，但我完全不知道如何确认这一点。
一旦我在设备上放大和缩小，输入就会按应有的方式显示，这更加令人困惑。
遗憾的是，我无法分享完整代码，但我会更新 stackblitz 示例以尽可能匹配代码。
有没有人遇到过类似的行为？
在此先感谢您提供任何信息，我已经在这上面花了几天时间，不知道如何进行。
经过大量的试验和错误后，事实证明这个错误只是在实际数据从服务器传入之前实例化和呈现空对象时引起的。
显示的客户端已实例化，因此我可以安全地绑定到成员而无需检查 null/undefined。
client: Client = new Client();
带有表单的组件已呈现，然后输入被 HTTP 请求的结果覆盖。
出于某种原因，iOS Safari 无法正确计算高度，以防输入在首次呈现时为空。
因此，解决方案是查询对象是否存在，并且仅在有内容可显示时才渲染它，因此一个简单的 *ngIf 解决了这个问题。
这只是一种解决方法，但如果其他人遇到此问题，我希望这会有所帮助。
我创建了一个带有一些输入的基本 angular-material 表单，并通过 angular flex-layout 对它们进行了排列。
除 iOS 设备上的 Safari 浏览器外，表单在所有浏览器中呈现都没有任何问题。
在 Safari 中，只有在加载禁用输入的表单时才会出现此问题。以下屏幕截图说明了问题：
当我启用输入并再次禁用它们时，它们会正确呈现。
启用版本
禁用版本
我试图创建一个演示行为的 stackblitz 示例 here，但我无法重现该问题。
我猜测某些 css 样式或 angular flex-layout 可能会产生这种行为，但我完全不知道如何确认这一点。
一旦我在设备上放大和缩小，输入就会按应有的方式显示，这更加令人困惑。
遗憾的是，我无法分享完整代码，但我会更新 stackblitz 示例以尽可能匹配代码。
有没有人遇到过类似的行为？ 在此先感谢您提供任何信息，我已经在这上面花了几天时间，不知道如何进行。
经过大量的试验和错误后，事实证明这个错误只是在实际数据从服务器传入之前实例化和呈现空对象时引起的。
显示的客户端已实例化，因此我可以安全地绑定到成员而无需检查 null/undefined。
client: Client = new Client();
带有表单的组件已呈现，然后输入被 HTTP 请求的结果覆盖。
出于某种原因，iOS Safari 无法正确计算高度，以防输入在首次呈现时为空。
因此，解决方案是查询对象是否存在，并且仅在有内容可显示时才渲染它，因此一个简单的 *ngIf 解决了这个问题。
这只是一种解决方法，但如果其他人遇到此问题，我希望这会有所帮助。