PDA

View Full Version : [CLOSED] The OverflowChange size monitor doesn't work if the element is sized with subpixels.



jbrantly@assuresign.com
27 Nov 2012, 8:44 AM
REQUIRED INFORMATION
Ext version tested:

Touch 2.1.0 stable
Browser versions tested against:

Chrome 23.0.1271.64 m
DOCTYPE tested against:

<!DOCTYPE html>
Description:

The OverflowChange size monitor doesn't work if the element is sized with subpixels. This particularly affects scrolling containers that have been inadvertently sized with subpixels due to use of percentages. The scroller then doesn't refresh correctly and strange behavior can ensue.
Steps to reproduce the problem:

Refer to repro code
Make sure 300px width is used
Press Hide/Show buttons and notice that "resize" is written to the console correctly
Comment 300px and uncomment 300.8px
Press Hide/Show buttons and notice that "resize" is not written to the console correctly
Test Case:
Ext.application({
name: 'ResizeBug',


requires: [
],


launch: function() {
Ext.Viewport.setLayout('auto');


var container = Ext.Viewport.add({
xtype: 'container',
layout: 'vbox',
height: 100,
width: '300px', // uncomment to see normal behavior
//width: '300.8px', // uncomment to see incorrect behavior
scrollable: true,
layout: 'auto',
items: [{
height: 50,
html: 'First Content'
}, {
height: 100,
html: 'Second Content'
}]
});


container.getScrollable().getScroller().getElement().on('resize', function(scroller, info) {
console.log('resize');
});


Ext.Viewport.add({
xtype: 'button',
text: 'Show',
handler: function() {
container.getAt(1).setHidden(false);
}
});


Ext.Viewport.add({
xtype: 'button',
text: 'Hide',
handler: function() {
container.getAt(1).setHidden(true);
}
});
}
});
HELPFUL INFORMATION
Possible fix:

Updating the refreshSize method in util\sizemonitor\Abstract.js to use floating sizes instead of integer seems to fix the issue. However this probably needs more thought.
//contentWidth = contentElement.offsetWidth,
//contentHeight = contentElement.offsetHeight,
contentBounds = contentElement.getBoundingClientRect(),
contentWidth = contentBounds.width,
contentHeight = contentBounds.height,

mitchellsimoens
27 Nov 2012, 11:13 AM
Using Chrome and 2.1.0, I get a resize logged for both widths.

jbrantly@assuresign.com
27 Nov 2012, 11:32 AM
I updated my Chrome and re-created the test case in a completely vanilla environment to make sure it wasn't something on my end. I'm still seeing the issue.

You mentioned that you see *a* resize logged for both widths: that's expected. The key difference is whether or not the resize is logged each time the second element is shown/hidden since it will cause the container to overflow.

mitchellsimoens
27 Nov 2012, 11:34 AM
Ah, I see now.

Thanks for the report! I have opened a bug in our bug tracker.