Отключенные поля ввода не отображаются правильно в сафари

Question

Я создал базовую форму углового материала с некоторыми входами и упорядочил их с помощью угловой гибкой компоновки.

Форма отображается без проблем во всех браузерах, кроме Safari на устройствах iOS.

В Safari проблема возникает только при загрузке формы с отключенными входами.Следующий снимок экрана иллюстрирует проблему:

Когда я включаю входы и снова отключаю их, они отображаются правильно.

Включенная версия

Отключенная версия

Я попытался создать пример стекаблиц, который демонстрирует поведение здесь , но я не смог воспроизвести проблему.

Я предполагаю, что некоторые стили CSS или, возможно, угловой flex-layout создают такое поведение, но я абсолютно не знаю, как это подтвердить.

Когда я увеличиваю и уменьшаю масштаб изображения на устройстве, входы отображаются так, как должны, что еще более запутанно.

К сожалению, я не могу поделиться полным кодом, но я обновлю пример стекаблица, чтобы он максимально соответствовал коду.

Кто-нибудь когда-нибудь сталкивался с подобным поведением?Заранее спасибо за любую информацию, я уже потратил несколько дней на это и не знаю, как поступить.

Answer 1

После большого количества проб и ошибок выясняется, что эта ошибка возникает только тогда, когда пустой объект создается и обрабатывается до того, как фактические данные поступают с сервера.

Показанный клиент был создан, чтобы я мог безопасно связываться с участниками, не проверяя наличие значения null / undefined.

client: Client = new Client();

Компонент с формой был обработан, а затем вход был перезаписан в результате запроса http.

По какой-то причине iOS Safari делаетне рассчитывать высоту должным образом в случае, если входные данные пусты при первом отображении.

Поэтому решение заключалось в том, чтобы запросить, существует ли объект, и отобразить его только тогда, когда есть что отобразить, поэтому простой *ngIfисправил проблему.

Это просто обходной путь, но, если кто-то еще столкнется с этой проблемой, я надеюсь, что это поможет.