Div "mainscreen" is not clickable in IE11

[Ted Cannelongo]

In Internet Explorer 11, I'm encountering an issue with the UI in which the "mainscreen" div is visible but unresponsive. This might be present in IE10, but I do not have a system running that version at the moment to test. It's fine in IE9 and other browsers.

If I adjust the z-Index from -1 to 0, I'm able to interact with it correctly. However, I'm not sure what the side-effects of this would be. I've tried identifying what might be the cause of this issue, but haven't yet been able to find anything. I can create divs in a test file with a negative z-Index and interact with them correctly in IE11.

[Janos SUTO]

Can you attach the fixed .tpl file or the .css file? I'll try it too, and if it's ok, then I will update the theme.

[Ted Cannelongo]

We haven't actually revised the .tpl files yet. I just changed the z-Index to 0 in the debugging tools for IE and saw that the items became clickable again. I was concerned that making it a permanent change might affect other functionality.

[Janos SUTO]

I think it should do the trick. Btw. can you switch to the mobile theme, and check it under IE11?

[Ted Cannelongo]

The issue stems from a combination of the absolute positioning and the negative z-index. The remarks here may be useful, though I didn't see a change when trying to wrap the div in a container div with positioning and overflow set. The mobile theme, which doesn't specify the z-index, works fine.

[Janos SUTO]

I changed z-index to 0 in view/theme/default/assets/css/metro-bootstrap.css for mainscreen, and I believe that has fixed the issue.