IE11 Changes DOM structure on JSF rerender

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

Communalism

Did you find a solution to this issue? It can be avoided by changing the html code in some cases (I guess only a single node within the re-rendered area), but those are only workarounds for code which works fine in all other browsers. – Gallo

@Gallo yes I think I found the issue, its specific to RichFaces issues.jboss.org/browse/RF-13443, I am just about to test with the patched AJAX.js so I will let you know – Communalism

Thanks. The sarissa fix did not work for me (checked it some weeks ago), but perhaps I got something wrong. You should definitely give it a try. – Gallo

@Gallo didn't work for me either, did you try with a new .jar or just override the .js script in the browser? – Communalism

I used an override .js. This already worked fine for another bug in an older RF version so I guess this should not be a problem. I guess the only viable option is working around this issue for now and making the jump to JSF 2. – Gallo

Yea I cant see this getting fixed anytime soon, I am actually in the process of migrating the app to JSF 2 so its good timing! – Communalism

Maybe it is useful for you #6861279 // Answer: "... JSF PhaseListener which adds X-UA-Compatible header to HTTP response" – Melanymelaphyre

@SandroAthaide Thanks but this is a separate issue with IE9 (actually fixed it last year!) – Communalism

Answer 1

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.

Broder

Just tried it and it worked in at least one special case, thanks! In fact, <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10"/> suffices in this case if you don't want to lose newer CSS features. (I was sure I tried X-UA-Compatible before and it did not work - perhaps I got something wrong then.) – Gallo

I can confirm, that <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10"/> fixes the issues with IE11 and Richfaces 3.3.3. – Joyjoya

I had a similar issue with Richfaces 3.3.1 (autosuggest) the selected values were not read in my backing bean but adding the meta tag (IE 10) solves it => no autosuggesting on such fields – Epidermis

Answer 2

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.

Lancinate

Answer 3

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.

Pruett