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.

[ghost]

Has anyone been able to sort this? I'm still having this issue and haven't found a way to get around it (apart from creating my own modal service using Angular Portals).

[ghost]

So, I've spent the better part of my working day (5 hours!!) trying to fix (what I thought) was an issue with Angular Material. Fortunately, I don't think there's an issue with Material, but I do think that there is an issue with the older versions of webkit that are used on iOS 11 and downwards.

Like @crisbeto said, the modal gets added to the DOM and everything seems to be correct up until the point where it comes to displaying it. As we all know, this is not Angular's job but the rendering engine.

To fix this, I simply force a re-render of the cdk-overlay-container by changing the CSS text after the modal opens and then changing it back to the original again.

const dialogRef = this.dialog.open(MyComponent);
dialogRef.afterOpen().subscribe(() => {
    const elements: any = document.getElementsByClassName('cdk-overlay-container');
    elements[0].style.cssText += ';-webkit-transform: rotateZ(0deg) !important';
    elements[0].style.cssText += ';-webkit-transform: none !important';
});

I haven't seen any issues because of this yet.

cc interested parties: @rkajbaf @mezhik91 @raimonfuns @marcinbialkowski @insanehong

[rkajbaf]

@elsyms I tried your solution on a virtual device running iOS 10.3.2 and 10.3.3 but it didn't work. I unfortunately don't have access to a real device to confirm this is working.

EDIT: After much nashing of teeth, this turned out to be caused by something unrelated I did to the CSS. Lesson learned, limit my css hacks!

[btxtiger]

I figured out, that <div class="cdk-overlay-container"></div> is not added to the DOM on iOS 12.1.4. Even adding this div manually to the index.html does not solve the issue, as no child element is added when clicking on the menu trigger button. I tried several workarounds from github, but none did work for me.
The menu will popup normally, when the body height is > than 100vh. If the height is smaller than 100vh the menu is not shown on iOS Safari. But just adding min-height: 100vh; does not have an effect.

[crisbeto]

Closing since I can't reproduce it anymore and the description is pointing to a very old iOS version.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}