CODEWITHSUNDEEP
jquery-uisafaridialog
Corey Ogburn
Corey Ogburn

Reputation: 24727

jQuery Dialog not visible in Safari while it has z-index?

We have a very jQuery/Javascript heavy web app with jQuery Dialogs in use all over the place, but one particular dialog is having issues in Safari on Windows. It's created like so:

$('#cnav-dispatch-center-window').dialog({
    close: stateObject.DeviceOptions.dispatchPin_dispose,
    resizable: false,
    width: 613,
    height: 467,
    dialogClass: 'dialog-window-alertedit',
    show: 'fade',
    hide: 'fade',
    open: stateObject.DeviceOptions.RefreshSelection
});​

We don't do anything special for this dialog than any other dialog. This dialog exhibits weird behavior:

If I remove the z-index, the dialog will display. I've tested that with the developer tools. I don't know what is setting the z-index and I'm not sure how to unset it. As long as the z-index is present, regardless what the value of it is, it won't display. It works fine in every other browser.

Upvotes: 2

Views: 1561

Answers (1)

Corey Ogburn
Corey Ogburn

Reputation: 24727

For anybody running into this problem:

I don't know why, and kudos to anybody who can explain it, but adding:

z-index: auto important;

To the dialog's class (in my example dialog-window-alertedit) fixes the issue for me. What's strange is that Safari continues to report that the z-index is 10,000+ but my dialog is displaying so I'm calling it close enough.

Upvotes: 5

Related Questions