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

Posted 2023-03-14

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

【英文标题】：iOS Safari (Mobile) and Angular Material UI: unwanted blinky text when focusing on the input field

【发布时间】：2020-07-30 18:59:36

【问题描述】：

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

这发生在 iPhone 和 iPhone 模拟器上

桌面 Safari 似乎不错

iOS 13

输入字段有一个文本占位符

使用 Angular Material UI <mat-form-field>

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

【参考方案1】：

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

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

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

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