ScrollBox ignores anchors of children elements and misplaces them (test case attached)

[afarber]

Hi, I have prepared a test case at https://codesandbox.io/p/sandbox/5-scrollbox-bug-demonstration-wzvznz showing the issue.

The left buttons have anchor=0.5 (to make their scaling animations work!) and are misplaced by the ScrollBox. The right buttons also have anchor=0.5, but they use a workaround - they are placed in a parent container with anchor=0:

Expected Behavior

ScrollBox children should always be placed so, that they are completely visible.

Current Behavior

Currently ScrollBox would put its children with anchor=0.5 too far to the left.

Additionally, the FancyButtons in the left ScrollBox lose their "disabled" appearance, when mouse is hovered over them, but maybe this is corrected by the recent PR #224 ?

Possible Solution

I think ScrollBox should place its children at something like: child.x = leftPadding + child.anchor * child.width

Steps to Reproduce

Please visit my test case at https://codesandbox.io/p/sandbox/5-scrollbox-bug-demonstration-wzvznz

Environment

• version: PixiJs v8.9.2, PixiJs UI v2.2.3
• Browser & Version: Microsoft Edge
• OS & Version: Windows 11
• Running Example: https://codesandbox.io/p/sandbox/5-scrollbox-bug-demonstration-wzvznz