Red Hat Bugzilla – Bug 1255428
[admin portal] top-left corner distorted in New Host dialog with IE 11
Last modified: 2016-04-19 21:10:12 EDT
Created attachment 1065287 [details]
Description of problem:
top-left corner distorted in New Host dialog with IE 11. See screenshot.
Version-Release number of selected component (if applicable):
Steps to Reproduce:
1. ie11 w7 x64
2. new host dialog
top-letft corner of the dialog is distorted
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]
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
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.
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]
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"
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.