Bug 139629 – Unnecessary scroll bars when child is resized manually.

• Status: RESOLVED
• Resolution: FIXED
• Component: Layout and Rendering

[Etheryte]

Given a parent element <div> with set width, height and overflow: auto, containing a child element <div> with larger set dimensions, when the child element is manually resized (through class addition, Javascript etc.) to be equal the parent's dimensions, the scroll bars are not hidden (as they should be).

Sample on Jsfiddle: http://jsfiddle.net/rktvybb0/
Related discussion on Stack Overflow: http://stackoverflow.com/questions/27474930/avoid-triggering-overflow-auto-after-resizing-a-child-element-to-matching-size/

[Etheryte]

Forcing a redraw with a workaround as seen on the following Stack Overflow thread removes the scrollbars: http://stackoverflow.com/a/3485654/1470607

Javascript:

    this.style.display='none';
    this.offsetHeight; //Won't work without this
    this.style.display='';

While this works as a workaround, it would still be nice to see this fixed.

[Etheryte]

The problem only occurs when the new dimensions for the child element are given in pixels, when percentage values are used, the issue isn't present.

[Etheryte]

As of version 63.0.3239.132, this issue is still present.

[Etheryte]

The issue is no longer reproducible in version 100.0.4896.75. I haven't kept track in what version it got fixed in specifically.