IE 9, 10, 11 Failing to Render Content of One Particular DIV (Added Using JS)

Question

I am having a strange problem with IE 11 and IE 10 (and IE 10 and IE 9 using IE 11's compatibility rendering) whereby one particular `div` is not being rendered until and unless I open the developer tools and click on any tag in the DOM explorer. Once I do that the `div` contents are immediately rendered. The page in question renders correctly on all versions of Chrome, Firefox and on IE 5, 6, 7 and 8. [EDIT: IE6 not tested; and 5, 7 and 8 tested via IE 11's document rendering emulation modes]. The page is authenticated and part of a complex SPA client with the majority of the HTML generated using JS, and what is delivered from the server is a bare outline where the sidebar content (which contains the non-rendered `div`) is simply: ```

Accepted Answer

This turns out to be a result of having the CSS selector:

```
#MultiSetup:empty { display: none; }
```

Apparently, IE 9+ continues to apply the `:empty` selector properties when the element ceases to be empty, so it remains hidden. When an element in the DOM tree is clicked it must cause some internal revalidation which then ceases to apply the properties.

Removing this selector resolves the problem (as does executing an explicit change when the innerHTML is set).

IE 9, 10, 11 Failing to Render Content of One Particular DIV (Added Using JS)

Solution

Problem