Results 1 to 4 of 4

Thread: The OverflowChange size monitor doesn't work if the element is sized with subpixels.

    You found a bug! We've classified it as TOUCH-3757 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Ext JS Premium Member
    Join Date
    Nov 2011
    Posts
    8
    Vote Rating
    0
      0  

    Default The OverflowChange size monitor doesn't work if the element is sized with subpixels.

    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:
    Code:
    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.
      Code:
                  //contentWidth = contentElement.offsetWidth,
                  //contentHeight = contentElement.offsetHeight,
                  contentBounds = contentElement.getBoundingClientRect(),
                  contentWidth = contentBounds.width,
                  contentHeight = contentBounds.height,

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,351
    Vote Rating
    1497
      0  

    Default

    Using Chrome and 2.1.0, I get a resize logged for both widths.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3
    Ext JS Premium Member
    Join Date
    Nov 2011
    Posts
    8
    Vote Rating
    0
      0  

    Default

    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.

  4. #4
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,351
    Vote Rating
    1497
      0  

    Default

    Ah, I see now.

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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •