mat-password-strength-info causing Javascript exception on iOS 15 Safari

[pappkamerad]

Bug Report or Feature Request (mark with an x)

- [X] bug report -> please search issues before submitting
- [ ] feature request

OS and Version?

iOS 15 Safari
Desktop Safari 15 (Technical Preview)

Repro steps

Go to the Demo page:
https://angular-material-extensions.github.io/password-strength/examples
and enable "Show Password Details"

The log given by the failure

JS exception:

The animation trigger "positiveState" has failed to build due to the following errors:
 - The provided animation property "backface-visibility" is not a supported CSS property for animations

Desired functionality

It works on latest Safari and does not break the page

Mention any other details that might be useful

[szbartnik]

Occurs also on MacOS and Safari v15.0

[szbartnik]

I realized that the best option for me (instead of waiting) was to copy-paste the existing mat-password-strength-info component from the library as it's extremely basic one. Now I'm even more happy as this way I could get rid of unwanted enter animations.

The good news is that everything the component needs to import is exported from the library. I had to remove the following line from the component so it is working again on Safari:

password-strength/projects/angular-material-extensions/password-strength/src/lib/component/mat-password-strength-info/mat-password-strength-info.component.ts

Line 36 in bc53778

style({'backface-visibility': 'visible'}),

Not sure if without the backface-visibility property set the animation looks bad on some browsers but it appears to be good on newest FF/Safari/Chrome so I'll take the risk.

[pappkamerad]

we also did that workaround, thanks @kneefer !

but besides that, do the authors plan on fixing this?

[DavidHedgesLogTag]

@kneefer 's approach is the only workaround I've come across but I'm really not a big fan due to tech debt it creates. I wasted a bunch of time on this issue trying to work around it in a different way- with no success so if anyone else finds a better way please let us know :)

PS Does anyone know why the [@.disabled]=true on the parent element (or any element) doesn't solve this problem? Its meant to disable animations - so I'm surprised they still error even when disabled.

[rattrick1]

Just wanted to bump this, this is a really big deal. Entire pages won't load on Safari if this component is used. Any plan to resolve?

[DavidHedgesLogTag]

Forgot to mention this happens on IOS Chrome too - assume due to how Apple forces Chrome to use WebKit rather than their Blink engine. Effectively its broken on all IOS browsers.

PS MacOS should just be broken on Safari (uses WebKit) -Chrome on MacOS uses Blink engine, apparently.

This issue can completely break a component and prevent Angular controls from rendering at all - e.g. if you have a formGroup with a bunch of elements including the mat-password-strength-info control... the whole formGroup doesn't render, e.g.

	  <input
		    #password    
		    type="password"                    
		    formControlName="pwd"
		    />
	  <mat-password-strength
	  		#passwordStrength
		    [password]="password.value"
		    ></mat-password-strength>
	  <mat-password-strength-info		  
		    [passwordComponent]="passwordStrength"
		    ></mat-password-strength-info>
</div>

[benelliottwoodlands]

Are there any plans to fix this in a release soon?
It is causing a lot of issues on one of our web sites.

[rattrick1]

According to this, that just needs the -webkit- prefix:

postcss/autoprefixer#653
https://caniuse.com/transforms3d

Can @AnthonyNahas chime in? As of right now, 19.6% of all people who view a page with this component will not render

[digitalhurricane-io]

I tested on iOS 15.4.1 and it rendered fine. Safari must have added support for "backface-visibility".

The animation for the checkmarks was janky though.

And I still don't like that people who can't or haven't updated safari would have an issue.

So I made a fork and removed most of the animations for the mat-password-strength-info component. I left the animation that jiggles the red circles.

I removed all uses of "backface-visibility".

If anyone cares to use the fork until the author decides what he want's to do in regards to this issue, here's the fork:

https://github.com/digitalhurricane-io/password-strength

NPM:

https://www.npmjs.com/package/@digitalhurricane/password-strength