A live demonstration showcasing unusual behavior can be found at:
If you attempt to resize the window by grabbing the right border and adjusting it horizontally, the vertical alignment goes awry. This issue persists across all open windows accessed through icons. All elements are draggable within this Angular single-page application.
The structure of my window div is defined as follows:
<div ng-repeat="pane in panes">
<div id="{{pane.windID}}" style="position: absolute; top: {{pane.x}}; left: {{pane.y}}; border: 2px solid black; min-height: 70; overflow: hidden">
<div style="padding:2px; overflow: auto; background-color: grey; border: 1px solid black">
<span style="float: left; text-align: left" ng-bind="pane.title"></span><span style="float: right; text-align: right" ng-click="closeWindow(pane.objID)">X</span>
</div>
<div compile="pane.content" style="background-color: white; padding: 5px; border: 1px solid black; overflow: auto;"></div>
</div>
</div>
While attempting to address the resizing issue by including logic for the content pane in the window, a quirk emerged specifically when resizing horizontally first. By manually setting the dimensions of the content pane to accommodate the title bar, inconsistencies arise.
Upon investigating the strange behavior further, it was observed that starting with a vertical resize afterward alleviated the bug's impact, allowing subsequent adjustments without a hitch. Despite occurring consistently across browsers, pinpointing the exact cause within the draggable resize function remains elusive.
If anyone has insights into why this anomaly occurs, your input would be greatly appreciated.