Question

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:

• It’s not visible
• It still intercepts clicks
• It’s still draggable if you can find the title bar
• It has a really high z-index (10,000+)

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.

Answer 1

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.