Disabled input fields are not rendered properly in safari
I've created a basic angular-material form with some inputs and arranged them via angular flex-layout.
The form renders without any issues in all the browsers except for Safari on iOS devices.
In Safari, the issue only occurs when loading a form with disabled inputs. The following screenshot illustrates the problem:
When I enable the inputs and disable them again, they are rendered correctly.
Enabled Version
Disabled Version
I tried to create a stackblitz example that demonstrates the behaviour here, but I could not reproduce the issue.
I am guessing that some css styles or maybe angular flex-layout produce this behaviour, but I have absolutely no idea how to confirm this.
Once I zoom in and out on the device, the inputs get displayed as they should, which is even more confusing.
Unfortunately, I cannot share the full code, but I will update the stackblitz example to match the code as closely as possible.
Has anyone ever encountered a similar behaviour? Thanks in advance for any information, I have already spent days on this and no idea how to proceed.
After a lot of trial and error it turns out that this error is only caused, when an empty object is instantiated and rendered before the actual data comes in from the server.
The displayed client was instantiated, so that I could safely bind to the members without checking for null/undefined.
client: Client = new Client();
The component with the form was rendered, and then the input was overwritten by the result of an http request.
For some reason, iOS Safari does not calculate the height properly in case the inputs are empty when they are first rendered.
The solution therefore was to query if the object exists and only render it once there is something to display, so a simple *ngIf fixed the issue.
This is just a workaround, but in case someone else comes across this issue, I hope this helps.