[4.1.0] After window resize, viewport can be scrolled because mask is not resized.

[ludoo]

REQUIRED INFORMATION

Ext version tested:

• Ext 4.1.0

Browser versions tested against:

• FF12
• Chrome 18

DOCTYPE tested against:

• Any

Description:

• After a window resize, hidden masks are not resized.
  It causes trouble in full layout.
  It occurs especially on viewport. I didn't try yith another layout.

Steps to reproduce the problem:

• open
  http://dev.sencha.com/deploy/ext-4.1...d-loading.html
• resize window to a smaller one
• select text from title until bottom of the page.

The result that was expected:

• No scroll

The result that occurs instead:

• the whole page scrolls down!!!

HELPFUL INFORMATION

Screenshot or Video:

• mask not resized effect.jpg

See this URL for live test case: http://dev.sencha.com/deploy/ext-4.1...d-loading.html


Debugging already done:

• none

Possible fix:

• It's probably because mask is visibility:hidden instead display:none
  but hideMode on LoadMask has no effect.
• or force resize mask even hidden:
  

  Ext.override(Ext.LoadMask, {
  	sizeMask: function() {
          var me = this, target;
          if (me.rendered /*&& me.isVisible()*/) {
              me.center();
              target = me.getMaskTarget();
              //me.getMaskEl().show().setSize(target.getSize()).alignTo(target, 'tl-tl');
              me.getMaskEl().setSize(target.getSize()).alignTo(target, 'tl-tl');
          }
      },
  });

Additional CSS used:

• -

Operating System:

• Win7

[tijuana]

LoadMask hides its element, not itself, via this.getMaskEl().hide(). I guess that's why hideMode on LoadMask has no effect. Here's a solution to hide it using DISPLAY mode:

Ext.override(Ext.LoadMask, {
    getMaskEl: function() {
        var maskEl = this.callParent(arguments);
        maskEl.setVisibilityMode(Ext.dom.AbstractElement.DISPLAY);
        return maskEl;
    }
});