[SOLVED] IE11 Changes DOM structure on JSF rerender

IE11 Changes DOM structure on JSF rerender

Ok bit of a strange one here, Iv not seen any other reports of this, we have had some UI bugs reported from IE11 users recently, after doing some testing I realised that after performing a reRender (I am using A4J) IE11 is putting HTML elements in the wrong place eg.

<s:div id="parent" rendered="#{someCondition}">
    <div id="brother"></div>
    <div id="sister"></div>
</s:div>

appears like this after rerender

<s:div id="parent" rendered="#{someCondition}">
    <div id="brother">
        <div id="sister"></div>
    </div>
</s:div>

Which is obviously playing havoc with the layout

I am mixing JSF/HTML components quite a bit, but dont think this should be causing problems?

Any ideas what might be causing this?

JSF 1.2 | RichFaces 3.3 | Facelets

Solution

Have you tried setting a meta tag for IE8 rendering mode:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

As I have heard also RichFaces 3 only supports up to Internet Explorer 8, or you might consider switching to RichFaces 4 for current browser support.

Microsoft: how to ensure compatibility

Hope this helps.