Loading/busy indicator not always on top (!)

Vaadin 6 / 7 / 8 Framework UI
1

I am using customized loading-indicator (semi transparent background with animation in the centre), as I found the default one (top right corner animation) unsuitable-hardly to notice on larger wide-screens. However that’s not the point of this call.

The thing is that loading-indicator (incl. the stock one) is not guaranteed to be always on top of other visual components. It easily gets covered by popup modal windows in particular. Woah! Likely because of the way components (divs) are layered out in DOM of html page. Loading-indicator is accomodated within main application frame, while child popup windows are at the same level as application frame. Why was this designed like that I don’t know. The fact is loading-indicator is then being tricked to appear on top using high value of ZIndex. This approach seems to be only partly successful. Certain browsers will render loading-indicator on top of windows, while other won’t.


Not OK browsers:

IE 7.x
IE 8.x


OK browsers:

FF 3.x
FF 4.x
Opera 10.x
Chrome 5.x

Question: Is there anything I could do about this in a conventional sense (without messing with custom component implementation)? Has anyone experienced the similar problem as I do?

Thanks for reading :slight_smile:
Tomas

2

Sounds like a bug, please file a ticket at http://dev.vaadin.com and include a test case.

3

Thanks!

Ok, I will create a ticket.

4

Reported via tracker as #5122.

It’s easily reproducible with provided use case.

5

any news to this topic or maybe a work-around?

6

Summary:

  • The problem occurs solely in
    IE7
     and IE8+IE9 with enforced IE7’s compatilibity mode.
  • IE8 (native), IE9 (native and IE8 compatibility mode), Firefox, Opera, Chrome have no such issue.