I have an issue whereby a modal will not appear in any browser (Safari, Firefox or Chrome) on an iPad.
The issue is strange because it only occurs in quite specific circumstances, but it reproducible 100% of the time.
The flow is: after login to our system, a modal may be displayed depending on some business logic.
The modal is a Vue.js component, and comes with an overlay div, and a modal dialog.
On desktop, in all browsers, this works perfectly well. Even if the user-agent is changed to mobile, screen size matched to iPad etc. etc.
On android devices, it also works perfectly well.
However, on an iPad, the modal will not appear. In fact, the dom itself appears to have been edited somehow.
The overlay div is removed entirely from the dom, and the modal itself has had its z-index is 0 and a style class of 'display: none’. 😕
There is no code in our application that would do this.
We have no conditional formatting or anything of the like, in fact, the overlay and the modal are one component so I cannot understand how the overlay is not in the dom.
To complicate matters further, I have tried 4 separate iPads. This issue was present on 3 of them. But there is no obvious pattern to me. The only thing that I can see, is that the iPad that works has cellular functionality, but I cannot imagine how or why this would even matter.
I’ve will attach the html snippets of the dom below in case they shed any light on the situation.
iOS version - 12.1.4, iPad version - MD785B/A - Not working
iOS version - 12.1.4, iPad version - MH312LL/A - Working
iOS version - 12.3.1, iPad version - MR7F2B/A - Not working
iOS version - 12.0.1, iPad version - MD785B/B - Not working
I’m curious if this is something that Apple have done intentionally or is there another explanation?
