This service will be undergoing maintenance at 00:00 UTC, 2017-10-23 It is expected to last about 30 minutes
Bug 1255428 - [admin portal] top-left corner distorted in New Host dialog with IE 11
[admin portal] top-left corner distorted in New Host dialog with IE 11
Product: Red Hat Enterprise Virtualization Manager
Classification: Red Hat
Component: ovirt-engine (Show other bugs)
Unspecified Unspecified
medium Severity low
: ovirt-3.6.1
: 3.6.0
Assigned To: vszocs
Jiri Belka
Depends On:
  Show dependency treegraph
Reported: 2015-08-20 10:33 EDT by Jiri Belka
Modified: 2016-04-19 21:10 EDT (History)
7 users (show)

See Also:
Fixed In Version:
Doc Type: Bug Fix
Doc Text:
Story Points: ---
Clone Of:
Last Closed: 2016-04-19 21:10:12 EDT
Type: Bug
Regression: ---
Mount Type: ---
Documentation: ---
Verified Versions:
Category: ---
oVirt Team: UX
RHEL 7.3 requirements from Atomic Host:
Cloudforms Team: ---

Attachments (Terms of Use)
screenshot (133.52 KB, image/png)
2015-08-20 10:33 EDT, Jiri Belka
no flags Details
Original image (129.07 KB, image/png)
2015-09-17 06:31 EDT, vszocs
no flags Details
Image with no-size fix (128.73 KB, image/png)
2015-09-17 06:32 EDT, vszocs
no flags Details
Image with auto-size fix (127.53 KB, image/png)
2015-09-17 06:32 EDT, vszocs
no flags Details
IE's buggy image handling (90.00 KB, image/png)
2015-09-17 06:42 EDT, vszocs
no flags Details
verification - screenshot (216.75 KB, image/png)
2015-12-02 07:17 EST, Jiri Belka
no flags Details

External Trackers
Tracker ID Priority Status Summary Last Updated
oVirt gerrit 46377 master MERGED webadmin,userportal: Fix IE image size quirk Never
oVirt gerrit 46726 ovirt-engine-3.6 MERGED webadmin,userportal: Fix IE image size quirk Never

  None (edit)
Description Jiri Belka 2015-08-20 10:33:45 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):

How reproducible:

Steps to Reproduce:
1. ie11 w7 x64
2. new host dialog

Actual results:
top-letft corner of the dialog is distorted

Expected results:

Additional info:
Comment 1 Einav Cohen 2015-08-21 10:11:24 EDT
Jiri, is it only in the New Host dialog? other dialogs look fine on IE11?
Comment 2 Alexander Wels 2015-08-28 10:11:04 EDT
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.
Comment 3 vszocs 2015-09-16 12:37:29 EDT
I can reproduce this on IE10 as well.
Comment 4 vszocs 2015-09-17 06:31:39 EDT
Created attachment 1074389 [details]
Original image
Comment 5 vszocs 2015-09-17 06:32:09 EDT
Created attachment 1074390 [details]
Image with no-size fix
Comment 6 vszocs 2015-09-17 06:32:29 EDT
Created attachment 1074391 [details]
Image with auto-size fix
Comment 7 vszocs 2015-09-17 06:42:33 EDT
Created attachment 1074392 [details]
IE's buggy image handling
Comment 8 vszocs 2015-09-17 06:58:23 EDT
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.


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.)
Comment 9 vszocs 2015-09-17 08:10:08 EDT
I wrote a fiddle that illustrates a possible fix that works globally (for all <img> elements):

This fix is IE9+ compatible.
Comment 10 Einav Cohen 2015-09-28 20:36:37 EDT
[not included in latest 3.6 build - moving back to MODIFIED]
Comment 11 Jiri Belka 2015-12-02 07:16:22 EST
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">
Comment 12 Jiri Belka 2015-12-02 07:17 EST
Created attachment 1101458 [details]
verification - screenshot
Comment 13 vszocs 2015-12-07 11:49:23 EST
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.

Note You need to log in before you can comment on or make changes to this bug.