-
-
Notifications
You must be signed in to change notification settings - Fork 73
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
mat-password-strength-info causing Javascript exception on iOS 15 Safari #337
Comments
Occurs also on MacOS and Safari v15.0 |
I realized that the best option for me (instead of waiting) was to copy-paste the existing 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: Line 36 in bc53778
Not sure if without the |
we also did that workaround, thanks @kneefer ! but besides that, do the authors plan on fixing this? |
@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. |
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? |
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.
|
Are there any plans to fix this in a release soon? |
According to this, that just needs the -webkit- prefix: postcss/autoprefixer#653 Can @AnthonyNahas chime in? As of right now, 19.6% of all people who view a page with this component will not render |
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 |
Bug Report or Feature Request (mark with an
x
)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:
Desired functionality
It works on latest Safari and does not break the page
Mention any other details that might be useful
The text was updated successfully, but these errors were encountered: