IE11 Changes DOM structure on JSF rerender

StackOverflow https://stackoverflow.com//questions/22015352

Question

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

Was it helpful?

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.

OTHER TIPS

As my problem with ajax rendering was simple, I opt to change the implementation (loading all forms and just toggle visibility with jQuery) but I've spent some time with this, and there goes my contribution.

Some of the render problems can be repaired with these updates: https://ruleoftech.com/2015/patching-richfaces-3-3-3-ajax-js-for-ie11 http://ruleoftech.com/2013/patching-richfaces-3-3-3-ajax-js-for-ie9

You could also try to make a patch of prototype.js located in richfaces-impl.jar org\ajax4jsf\javascript\scripts, changing the method that sets the browser to IE using navigator.userAgent.

Browser: {
IE: (!!(window.attachEvent &&
    navigator.userAgent.indexOf('Opera') === -1) 
    || (navigator.userAgent.toLowerCase().indexOf("like gecko") > -1 
    && navigator.userAgent.toLowerCase().indexOf("11.") > -1) )

Now, if you debug Prototype.Browser at the browser console you get true to IE11.

Pay attention that RF can 'minify' all third library scripts that it is using.
Check the files loaded in the <head> of the html. Maybe all those changes should be made in the richfaces-impl-3.3.3.Final.jar/org/ajax4jsf/framework.pack.js.

I use the patching-richfaces-3-3-3-ajax-js-for-ie9 guide to be able to use richfaces 3.3.3 with ie11. I just updated version 0.9.9.7 of Sarissa on Ajax.js.

The meta tag X-UA-Compatible could not use it in my case, it was in an iframe (child) and I ignored the meta tag.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top