[mdc-textfield] prefix and suffix mis-aligned on iOS devices

[simonziegler]

Bug report

Text field prefixes and suffixes misalign when viewed on iOS devices, while aligning correctly on any other device/browser combination that we've tested for Material.Blazor.

Steps to reproduce

1. Visit this GitHub Pages site using an iOS device.
2. Also try our Material.Blazor text field demo page.
3. See pared back sample code for the example in item 1 here on Github,

Actual behavior

See an excellent screenshot taken by our user @gismofx in this imgur video in Material.Blazor issue https://github.com/Material-Blazor/Material.Blazor/issues/242. You should also notice that the text input itself jumps from first entry to subsequent edits for filled text fields

Expected behavior

Proper alignment

Screenshots

https://imgur.com/a/tAWKfKu

Your Environment:

Software	Version(s)
MDC Web	7.0.0
Browser	Safari and others
Operating System	iOS 14

Additional context

We've noticed other issues using Material Components Web with iOS at https://github.com/material-components/material-components-web/issues/6357.

[simonziegler]

Hi, what does the "techdebt" label mean in terms of your approach to this issue please?

[simonziegler]

I've upgraded the test to material components web 8.0.0 and matters are improved but still not quite right:

• Outlined text fields now appear to behave well with prefixes, suffixes and input text all properly aligned.
• Filled text fields are still problematic. The first time you type some text in it is raised too high. When you subsequently edit the input aligns correctly.

[simonziegler]

Is there anything else I can provide to help you with this?