iOS Safari（移动）和 Angular Material UI：专注于输入字段时不需要的闪烁文本

【问题标题】：iOS Safari (Mobile) and Angular Material UI: unwanted blinky text when focusing on the input fieldiOS Safari（移动）和 Angular Material UI：专注于输入字段时不需要的闪烁文本
【发布时间】：2020-07-30 18:59:36
【问题描述】：

在文本字段之间切换焦点时，iOS Safari 13 会出现不希望出现的文本动画消失。

这发生在 iPhone 和 iPhone 模拟器上
桌面 Safari 似乎不错
iOS 13
输入字段有一个文本占位符
使用 Angular Material UI <mat-form-field>

问题在下面的GIF动画中演示

【问题讨论】：

标签： safari angular-material mobile-safari placeholder

【解决方案1】：

mat-form-field-outline 上有一个过渡动画，在 iPhone 上播放效果不佳。我猜这是因为键盘会弹出，这会以某种方式使转换的播放方式与其他网络浏览器不同。

解决办法是禁用转场动画：

  ::ng-deep .mat-form-field-outline {
    transition: none !important;
  }

另请参阅：Problem mat-form-field outline background-color on hover

【讨论】：