MdDialog not opening on iOS Safari

[insanehong]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

The dialog should Open

What is the current behavior?

The dialog doesn't open and stop progress when reopen dialog
https://material.angular.io/components/dialog/examples had same problem now.

CodePen and steps to reproduce the issue:

CodePen Demo which shows your issue:

https://stackblitz.com/angular/pxglmmxpyejr?file=app%2Fdialog-overview-example.ts

Detailed Reproduction Steps:

on Safari or Chrome with iOS

Step1. click Pick one button
Step2 . close dialog
Step3. click Pick one button

What is the use-case or motivation for changing an existing behavior?

Which versions of AngularJS, Material, OS, and browsers are affected?

• Angular: 5.2.7
• Material: 5.2.4
• OS: iOS 10.3
• Browser: Safari and Chrome

Is there anything else we should know? Stack Traces, Screenshots, etc.

[tiagoblackcode]

Hi, I just tested the stackblitz code and it seems to be working on iOS.

However, I cannot open dialogs when building the project I'm currently working on with prod yarn run ng build--prod with @angular/material@6.0.0-beta.4 related to the new Directionality service where the Injector can't seem to locate the service at run-time. This only happens on prod builds.

I'm trying to debug it at the moment and post an update if I can find the solution.

edit: formatting

[crisbeto]

This one is very odd. I wasn't able to reproduce it on a couple of iOS 11 devices, but I did manage to get it on a few rare occasions when running an iOS 10 device through the simulator. What's weird is that I could only get it through the Stackblitz and our docs site, but not in the demo app that's running against master. Furthermore, it seems like the element is in the DOM and it gets the proper styles (in this case transform: none and opacity: 1), but the browser decides not to render it for some reason. If I trigger a style recalculation manually (e.g. by toggling the box-shadow through the dev tools) it ends up displaying, but it's hard to know whether doing something like that from Material would fix it since I can't reproduce it consistently.

[insanehong]

@crisbeto I have iphone5 that ios latest version is v10.3.3. so I was reproduce aways.

and I found one more thing. See the this video clip

https://youtu.be/W1f8NrrlKb0

[crisbeto]

That's what I was getting as well. The interesting thing is that if you switch to another tab and then switch back, the dialog will show up.

[insanehong]

@crisbeto I wasn't able to reproduce When I was added an style attribute display: block to .cdk-overlay-container

Refer to the message above.

[crisbeto]

How did you add it @insanehong? Was it through the dev tools after the dialog is opened, or through a stylesheet? If it's the former, you saw the dialog, because you triggered a style recalculation manually which caused the dialog to be repainted. Otherwise setting the container to display: block shouldn't make a difference, because it's a div which is a block by default.

[yacineblr]

Same for me with iPhone 7 iOS 11.3
Capture on iOS:
https://drive.google.com/open?id=1MfI1x8O5mtInDLgnNYfrqPeqpO5kpLPd

[yacineblr]

I found the solution, uncomment what you need in the file "polyfill.ts", I had completely forget that this file existed

[marcinbialkowski]

I have the same issue on iOS 10.2.1 and 10.3.3 (but cannot reproduce it on iOS 11). Dialog shows up when I trigger style recalculation in dev tools or switch to another tab and switch back.

@yacineblr It seems that you have problem with closing dialog, not with opening. Polyfills haven't solve this for me.

[DMezhenskyi]

Same problem. I can open dialog window but can't close it. This bug appears on IPhone 7 with IOS 11.3. On 10.1.1 works fine.
P.s Polyfills haven't solve this for me as well.

[swftvsn]

This is really odd, but all my safari problems are gone after

• Removing import 'web-animations-js' polyfill
• Providing NoopAnimationsModule instead of BrowserAnimationsModule in app.module.ts

What's even more puzzling is that all the animations actually work on Chrome an ios too..

[raimonfuns]

I solved this by adding pointer-events: auto; to .cdk-overlay-container.

[DMezhenskyi]

@swftvsn I also fixed it with this way but some animations are broken on Safari desktop.

[rkajbaf]

@raimonfuns pointer-events solution did not work for me. @swftvsn turning off animations works also makes it so progress spinner does not spin any more among other issues.