Created attachment 1065287 [details] screenshot Description of problem: top-left corner distorted in New Host dialog with IE 11. See screenshot. Version-Release number of selected component (if applicable): rhevm-webadmin-portal-3.5.4.2-1.3.el6ev.noarch How reproducible: 100% Steps to Reproduce: 1. ie11 w7 x64 2. new host dialog 3. Actual results: top-letft corner of the dialog is distorted Expected results: niceeeee Additional info:
Jiri, is it only in the New Host dialog? other dialogs look fine on IE11?
It appears to be all dialogs. I just installed IE11 to take a look and there are several graphical issues with it. One of which is the corner of the dialog is missing.
I can reproduce this on IE10 as well.
Created attachment 1074389 [details] Original image
Created attachment 1074390 [details] Image with no-size fix
Created attachment 1074391 [details] Image with auto-size fix
Created attachment 1074392 [details] IE's buggy image handling
Root cause: IE automatically adds "width" and "height" attributes, with their values computed from "src" attribute, when an <img> element is created via "new Image" constructor function. See [IE's buggy image handling] screenshot. In oVirt UI, this causes the reported "top-left dialog corner messed up" issue, since the "src" attribute points to 1x1 image (clear.cache.gif) and the actual image comes through CSS styling. See [Original image] screenshot. There are two fixes: a, remove "width" and "height" attributes, see [Image with no-size fix] screenshot b, set "width" and "height" attributes to value "auto", see [Image with auto-size fix] screenshot Solution b, seems to be more appropriate. Summary: This is not a bug in oVirt UI or GWT framework itself, this is an IE-specific issue that we need to work around. (According to HTML spec, "width" and "height" are optional when creating an <img> element.)
I wrote a fiddle that illustrates a possible fix that works globally (for all <img> elements): http://jsfiddle.net/0oaywv8e/ This fix is IE9+ compatible.
[not included in latest 3.6 build - moving back to MODIFIED]
ok, rhevm-webadmin-portal-3.6.1-0.2.el6.noarch currect check with ie11 <img width="auto" height="auto" class="obrand_dialogHeaderLeftPanel" src="clear.cache.gif">
Created attachment 1101458 [details] verification - screenshot
Thanks Jirko for verification. > <img width="auto" height="auto" class="obrand_dialogHeaderLeftPanel" > src="clear.cache.gif"> Yes, this is the IE-specific fix. In "normal" browsers like Firefox or Chrome, it is: <!-- src points to 1x1 placeholder, actual image comes from CSS class --> <img class="obrand_dialogHeaderLeftPanel" src="clear.cache.gif"> Whereas in IE it becomes: <!-- IE adds width/height based on src which is NOT what we want --> <img width="1" height="1" class="obrand_dialogHeaderLeftPanel" src="clear.cache.gif"> So we're using "auto" to work around IE.