Issue with coordinate system in Pixi.js

I'm building a game with rows of items but am having a problem with what's being reported as the global coordinates of the rows.

I have the following log in my code

if (topRow) {
            let globalPosition = topRow.container.toGlobal(new PIXI.Point());
            console.log(
              `Top Row Global Position: x=${globalPosition.x}, y=${globalPosition.y}`
            );
        }

This is reporting that the global y co-ordinate of the top row is at 51 pixels when the log was made but the top row is actually much further down the screen as show in the screenshot below.

The y position is used to determine when new rows are generated so when it's progressively causing new rows to be generated further and further down the screen. It's as if the coordinate system is shifting downwards as the rows are falling but the global position should give the position within the app stage regardless.

I've navigated up the container tree and all the parent containers have a global y position of 0 so it's unclear what is causing elements within to report incorrect positions (might be correct but I'm missing something.

I've loaded the app into pixiplayground.com based on a recommendation from @EduardoPáezRubio https://www.pixiplayground.com/#/edit/OCEwawHfFpLaHbcMw8EYu

Your issue is related to the block placement inside the rows, specifically this call:

const block = createBlock(
  tileValue,
  i * blockWidth,
  rowIndex * blockHeight,
  sequence
);

Each new row will place its children blocks at y = 0, 50, 100... However, when you calculate the global position, you use the row's position instead of the blocks' position.

Two possible ways to get the desired behaviour would be:

• Create all blocks at position y = 0 inside the row, since the transformation of the ancestors will place them at the correct height.
• Use one of the blocks to calculate the global position, for example:

topRow.container.children[0].toGlobal(new PIXI.Point())