React.js应用在iPhone设备上HTML输入框已输入内容无法显示问题求助

在iPhone设备上使用React.js开发的应用时，HTML输入框中已输入的内容无法正常展示，多台iPhone设备均可复现该问题。该问题同时存在于Safari浏览器与iOS端Google Chrome浏览器中，安卓设备下输入内容可正常展示。

• 检查输入框样式是否存在负值text-indent或padding-left：iOS WebKit对负文本缩进的处理逻辑与安卓Blink内核不同，会导致文字被挤出可视区域，将对应属性调整为非负值即可解决。
• 排查自定义字体兼容性：iOS对部分自定义字体的基线计算存在偏差，会导致文字渲染到输入框可视范围之外，可临时将输入框字体设置为系统默认字体font-family: -apple-system, BlinkMacSystemFont, sans-serif验证，若确认是字体问题可调整字体基线或更换兼容字体。
• 校验React受控组件逻辑：确认受控输入框的value属性与onChange事件绑定逻辑是否正常，可临时切换为非受控模式用defaultValue赋值测试，若非受控模式显示正常则排查state更新相关逻辑。
• 移除输入框的user-select: none样式：部分版本iOS WebKit会将输入内容判定为不可选中内容直接隐藏，删除该属性即可恢复正常。
• 排查自动填充属性冲突：给输入框添加autocomplete="off"测试，排除iOS自动填充特性带来的样式冲突导致文字被遮挡。

内容的提问来源于stack exchange，提问作者TrNgTien