Working with a client and we are trying to insert some Bootstrap code into a OneUI site running on IE11 – everything was working smoothly until we actually tested in IE11. (Of course we developed using Chrome – well who wouldn’t….)
Compatibility Mode
So finding the root cause of the problem was simple – Compatibility Mode being run on the customer intranet – AAAAAAh yes that old chestnut – well we overcome that issue with a phaseListener as documented by Mark Hughes many years ago.
But that did not fix the layout issue – IE=edge was in the header and everything else looked just fine…..
Then I noticed this in the Page HTML….
but I look at the page source and I find this……no Class
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html lang=”en”>
<head>
Oh OneUI you old devil
So after some digging I found this included in the HTML
/domjava/xsp/theme/oneuiv2.1/js/ie7.js
and there, in the code……
/* Copyright IBM Corp. 2010, 2013 All Rights Reserved. */ document.getElementsByTagName("html")[0].className+=" lotusui_ie lotusui_ie7";
OH MY……….so what is happening is that the Notes Server is detecting that the IE11 Compatiblity Mode browser is actually trying to behave as IE7. And it is adding an IE7 style sheet, as the page is loaded, overriding the theme’d OneUI CSS which is being added earlier up the HTML DOM (yay cascading stylesheets I guess…)
Easy fix.
Naturally we are using jQuery within the page so the classes can be easily removed with the following code at the end of the XPage
$(document).ready(function() { //This is HACK CODE to remove the lotusui_ie7 class which is //programmatically added to the page by OneUI after the page is loaded in IE7 compatibility mode $('html').attr('class', ' '); });
That makes me feel filthy just reading it.
Talk about convoluted hackery !!
Agreed.