CODEWITHSUNDEEP
safariangular-materialmobile-safariplaceholder
Mikko Ohtamaa
Mikko Ohtamaa

Reputation: 83636

iOS Safari (Mobile) and Angular Material UI: unwanted blinky text when focusing on the input field

When switching focus between text fields, the iOS Safari 13 gives an unwanted disappearance of text animation.

The problem is demonstrated in the GIF animation below

enter image description here

Upvotes: 1

Views: 782

Answers (1)

Mikko Ohtamaa
Mikko Ohtamaa

Reputation: 83636

There is a transition animation on mat-form-field-outline that plays badly on iPhone. I guess this is because the keyboard pops up and that somehow makes the transition play differently than on other web browsers.

The solution is to disable the transition animation:

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

See also: Problem mat-form-field outline background-color on hover

Upvotes: 1

Related Questions