Scrollview content disappears, Content entity recieving localPosition of NaN

[flyingbaba]

While the debug console is opened and the Device toggler is set to mobile the scrollView Content localPosition sets to NaN. Scrollable content disappears. We noticed that this issue is present almost only if the Debug console is on and mobile mode is toggled.

https://user-images.githubusercontent.com/10512039/189824028-b10012e0-5145-4603-9d9f-bf4eb56e169c.mp4

Steps to Reproduce

1. Open https://playcanv.as/b/E9AhLZ7J/ or Fork the project https://playcanvas.com/editor/scene/1319039 and hit Launch
2. Open Dev Console and toggle the mobile view
3. Hit Inventory / Toggle button
4. Drag the contents of the inventory ScrollView, !!! drag fast and nervous =) so the cursor get's out of the browser's window.
5. Check out the inventory-ui.js (lines 19-29) script for the console.trace() hook

[flyingbaba]

Today, while trying to replicate this bug we were confused because could not do this. Later we found out that this bug is happening only on a small mobile view resolutions. So then setting the resolution to 407px x 745px this bug appeared again.

Then setting in back to bigger we were unable to replicate it:

[kungfooman]

I am stuck in endless loops trying to scroll anything:

Handlers that take two to seven seconds to execute, did you change something in the meantime?

Edit: "worked to NaN crash" after reloading

[flyingbaba]

I am stuck in endless loops trying to scroll anything:

I never seen this before.

Edit: "worked to NaN crash" after reloading

Great ! It also took me a while to get it ;) Thanks !

[yaustar]

Do you get this issue on an actual mobile device or only on desktop mobile view?

Also, is this issue blocking you?

[kungfooman]

Do you get this issue on an actual mobile device or only on desktop mobile view?

I just tested it on my iPhone/Safari and it breaks aswell

[flyingbaba]

Also, is this issue blocking you?

No, but if the issue is present on iPhone then it is a serious issue.

[kungfooman]

I started to investigate a little bit with a type checker, not sure yet if I can fix it... but just looking over your scripts I already found the issue why it probably went into endless loops:

        if (! this.made) {
            this.make = false;
            INVENTORY_UI.makeInventory();
        }

This looks like a typo between made/make, which causes that the items are adding again and again (until it lags for seconds, if you open the shop a few times).

[yaustar]

I stuck a debugger statement into the project

And it looks like element-drag-helper.js _screenToLocal is returning a NaN value when used in the _onMove function

Still looking....

[yaustar]

Okay, somehow the element position becomes Vec3 {x: Infinity, y: -Infinity, z: -Infinity} which is why we are getting NaNs later down the line 🤔

[kungfooman]

Yea, the deltas in ElementDragHelper#_onMove become larger every frame, because one is using global position and the other takes local position... that goes well for a few frames, but then explodes into either extremely near 0 or Infinity. And in the case of Infinity it perpetuates itself further into NaN.

I worked it out a little bit and would like to make a PR with a few more changes, which I realized along the way, but I still need to contemplate it all a bit more. 😅

[yaustar]

Tracked it down to the Content entity local position.z becomes infinity at some point and screws over all matrix operations done the line.

[yaustar]

Ah, looking at your PR @kungfooman and what I found, I wonder if it's related to https://github.com/playcanvas/engine/issues/3748

[yaustar]

With my patch added from #3748, I can't reproduce the issue: https://playcanvas.com/project/986813/overview/f-sprite-load--render-issue so it's definitely related to issue that the Z position of the element gets infinitely small

[flyingbaba]

@kungfooman Thanks for noticing =) I was a bit rushing with reproducing the issue.

@yaustar , thanks for the patch !