Horizontal scroll flickering

[ahoys]

Issue:
Horizontal scrollbar(?) is visible in scroll component that should only have vertical scroll enabled by default. Beyond that, the horizontal scrollbar is flickering in VR.

Replication:

1. Create a scroll component <scroll>...</scroll>.
2. Look at the component in VR.

Also, can the scroll be stylized? What's the css hook for it? ::-webkit-scrollbar doesn't seem to be it.

[ahoys]

More information: Just noticed that it has got something to do with the menu object constantly turning. I've set the menu to face the player all the time menuCanvas.transform.LookAt(playerCamera.transform);

This will enable the flickering.

[KurtGokhan]

Scroll is Unity's scroll and it is a bit buggy. Can you try adding some minimal padding inside the scroll component and see if that fixes it?

Styling the scrollbar is something that have been in my mind for a while. I will start working on it.

[KurtGokhan]

Scrollbars can be styled with ::scrollbar and ::scrollbar-thumb selectors. They can also be positioned with inset (left,right,top,bottom) and width, height properties.

Example:

// Make all scrollbars green color
scroll::scrollbar {
  background-color: green;
}

// Place vertical scrollbars on the left and offset by 10px
scroll::scrollbar[vertical] {
  left: 10px;
}

Also the scroll component accepts direction property now. The value is one of: both, horizontal, vertical, none

For example, if you want to disable horizontal scrolling (which would also get rid of flicker):

<scroll direction="vertical">
  ...
</scroll>

Available in core@0.4.5 and renderer@0.4.1

[ahoys]

Almost! Now if the scrollable component isn't visible on the first page you see in the UI, the scroll works as described, but if you start directly from an UI view that has a scroll, that scroll still bugs like in the image above. I had no direction attributes set. Simply <scroll>...</scroll>.

For example:

• Main menu that has a link into a server browser (a list that's a scroll) -> works fine.
• Menu that starts directly from server browser -> visible white lines.

Also, while testing, this happened once:

The line went behind the UI. It was placed about 1 meters behind the canvas.
It happened while I started from a scrollable view, then went to a non-scrollable view and finally back to the scroll view.

[KurtGokhan]

@ahoys is it possible for you to build the react app and send me the generated javascript file. You can send it to my email.

If you don't want to send it, that is okay. It will probably take me some time to reproduce the issue.

[ahoys]

Removed the file

The build file is inside the build dir.

[KurtGokhan]

I found the problem quickly thanks to the file you sent.

Seems like there was some kind of a race condition. Tweaking the script execution order a bit fixed the issue. Hopefully it does not break anything else.

Fixed in 0.4.6. At least the flickering issue should be fixed.

Note: It is ok if you delete your file.

[ahoys]

Hmm... I'm not sure if the update changed anything. I still see the lines and the horizontal is flickering, while the vertical has troubles in positioning. The latter probably being the bigger problem.

I also tried the direction-attribute and noticed that setting direction vertical didn't remove the horizontal line.

I did the following procedures to update the packages:
yarn update @reactunity/renderer
npx openump-cli add com.reactunity.core in the project folder.

[KurtGokhan]

I found the reason direction is not working. But I could not reproduce the wrong scrollbar position issue. What is your Unity version by the way? Also, what is the size of your canvas?

Is there anything else you do to get this issue? Are you manually modifying the sizes React elements or the canvas by any chance?

[ahoys]

I'm using the preview 2021.1.16f1.
My canvas size is 2800x2000, with scaling of -0.001 x and 0.001 y. I'm not modifying the size of the elements, but I am fading "MainMenu" gameObject in / out and switching its position based on where the player decides to open the menu.

The key thing to reveal the bug seems to be switching between container components with basic React-states. If I open the menu with a scroll view visible, the position of the white lines are about where they're supposed to be (right & bottom), but if I then switch to another view and back, the lines have moved to some other depth level. Repeating this and the lines get more and more offset.

See the full stack below:

The Background is simply a rawImage behind the canvas, to give the UI a bit elevated 3D-effect.

[ahoys]

Upon further testing, the issue seems to be related to the canvas moving in some way. For example using the following script with the MainMenu reveals the issue:

using UnityEngine;

public class FaceAtCamera : MonoBehaviour
{
    public Canvas menuCanvas;
    public Camera playerCamera;

    void Update()
    {
        menuCanvas.transform.LookAt(playerCamera.transform);
    }
}

So, the same setup as above, but instead of the MainMenu script, I only used the FaceAtCamera script described above.

[KurtGokhan]

Ah, I see the issue now. Somehow Z position of the scrollbar shoots off as you rotate the HMD/menu. I suspected that from the image above.

[KurtGokhan]

Should be fixed in 0.4.8