View Full Version : [FIXED] [4.0.5] LoadMask shadow not aligned properly

28 Jul 2011, 1:01 PM
REQUIRED INFORMATION Ext version tested:

Ext 4.0.5

Browser versions tested against:

FF5 (Firebug 1.7.3)
Chrome 12


The shadow on floading LoadMask elements does not appear to be aligned properly. This only applies to 4.0.5 (to my knowledge), as I don't recall seeing shadows on LoadMasks in 4.0.4 or earlier. Firefox has the worst appearance of the browsers, but to my eye none of the browsers size/position the shadow entirely correctly.

Steps to reproduce the problem:

Display a LoadMask on an element using Ext.AbstractComponent.setLoading(true).

The result that was expected:

The shadow should be sized and positioned to show shadows equally on all four sides of the "Loading..." box.

The result that occurs instead:

Firefox shows a one-pixel gap between the right edge of the "Loading" box and the start of the shadow.
Neither Firefox nor Chrome shows any shadow on the top of the "Loading" box. IE does show a little shadow on the top, but it still looks smaller/fainter than the shadows on the other three sides.

Test Case:
Ext.onReady(function() {
var viewport = Ext.create('Ext.Viewport', {
listeners: {
afterrender: function(component) {
}); HELPFUL INFORMATION Screenshot or Video:

By tweaking the top, height, and width values of the shadow element by hand, here is what I think a correctly displayed shadow would look like:
Here is how the shadow actually appears in Firefox:
And in Chrome:
And in IE:

Debugging already done:


Possible fix:

not provided

Additional CSS used:

only default ext-all.css

Operating System:


4 Aug 2011, 6:59 AM
Eagle eye! You are Abe Elias, and I claim my $5!

Anyway, just fixed this one!