ScrollBox hides children items, because its height is not really changed (test case attached)

[afarber]

Hi, I have prepared a test case at https://codesandbox.io/p/sandbox/6-scrollbox-items-disappear-292jm5 showing the issue.

When I create a ScrollBox there with:

  const scrollBox = new ScrollBox({
    background: "BlanchedAlmond",
    width: 236,
    height: 180, // this height can only display 3 buttons!
    radius: 20,
    elementsMargin: 8,
    padding: 8,
  });

and resize it with:

  const onResize = () => {
    scrollBox.x = (app.screen.width - 236) / 2;
    scrollBox.y = 8;

    scrollBox.setSize({
      width: 236,
      height: app.screen.height - 2 * 8, // changing the height, but see below!
    });
  };

  addEventListener("resize", onResize);
  onResize();

then initially all children buttons are displayed:

and then already at the next frame update all buttons except the first 3 disappear:

Expected Behavior

ScrollBox children should be displayed, if they are within the ScrollBox height

Current Behavior

ScrollBox children outside of the initial height (set in the constructor) are hidden by ScrollBox update() method

Possible Solution

Workaround:

disableDynamicRendering: true does not help here.

What helps is updating options:

// both options.height should be updated and setSize() called or items will disappear
scrollBox.options.width = w;
scrollBox.options.height = h;
scrollBox.setSize({ width: w, height: h });

So maybe the proper fix would be to change the setSize() method to update this.options.height?

Steps to Reproduce

Please visit my test case at https://codesandbox.io/p/sandbox/6-scrollbox-items-disappear-292jm5

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/6-scrollbox-items-disappear-292jm5