My page elements should appear in all browsers as follows:
I can only achieve this in IE11 by having the dev tools open during page load, otherwise the page generates as the following:
Summary
This issue is only with IE11, the site works in chrome, firefox and even Safari without any additional plumbing. I have found some IE fixes on SO, but so far none of them have worked:
*.html - add meta information to use Edge engine
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<html>
<head>
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<![endif]-->
... html continues with rest of head
*.js - to prevent undefined console from blocking processing
if(!window.console) {
console.log(item);
}
I have been sure to use Ctrl F5 when reloading the page for testing, and have also restarted devmode to see if that makes a difference. I have also confirmed that the site is not running in compatibility mode by looking in the compatability settings.
Looking through the logs I can see that when the page loads with dev tools closed, the binding is carried out using user.agent=ie8, whilst with devtools open, the binding property is user.agent=gecko1_8. I thought IE11 should always use the gecko1_8 permutation - why could this not be happening?
(using GWT Version 2.7)
Not sure if this will be of any help. We are using GWT (2.8, but I think it also worked with 2.7 in the past). With GWT-Bootstrap3 (https://github.com/gwtbootstrap3/gwtbootstrap3) without any problems in IE11. I am not sure you are using the same bootstrap library ?
Anyway. We added the following line in our html file (as the first line of the head tag) :
<meta http-equiv="x-ua-compatible" content="IE=10">
I can not really remember how I came up with this line, but the version history states : "It is now possible to use IE11 in compatibility mode"
So it has to do something with fixing something in IE-11, using GWT and bootstrap 3 :-)