Hi, I’m working on a section of my UI where I want a series of UI elements arranged vertically. I know that in some cases there will be more than will fit on the screen, so I am using a ScrollView to try to allow vertical scrolling. However, I am having a problem that, when I actually scroll up and down in the scroll view, it appears that old renderings of the UI remain, making the UI elements appear to streak vertically on the screen.
I’m sure I’ve missed something simple about how to set up this system, but have tried to follow the guidance I’ve found in the manual and other forum posts as closely as I can to get to this point. Any assistance would be greatly appreciated.
For this example, I have a single UI element (a Text (TMP) full of dummy text) as a child of “Content”. The Display before scrolling:
The display after scrolling:
My object hierarchy:
The SideBar components are:
-Canvas
-Canvas scaler
-Graphic Raycaster
The Scroll View components are:
-Canvas Renderer
-Image
-Scroll Rect
The Viewport components are:
-Canvas Renderer
-Image
-Mask
The Content components are:
-Content Size Fitter
-Vertical Layout Group
If there’s any more details that would be helpful, I’d be happy to provide them.
I’ve done some playing and still haven’t been able to fix the problem. However, by making the background of the Scroll View not transparent, I’ve essentially been able to hide the streaking from previous renderings. This is fine for my application. However, if I wanted to have a scrollable section of UI that was transparent, it would not be suitable, so if anyone has any tips of what I’ve done wrong, I’d still be interested to learn how to use these tools better.
If there are NO opaque objects behind your text at any point, then this seems like it could be related to your Camera settings; e.g. you somehow have it configured not to erase the image from the previous frame before you draw the one from the new frame.
Theoretically, something like this could also happen if you had a script somewhere that was constantly duplicating your sidebar, so that you end up scrolling the “front” copy but the one behind it is still in the old scroll position.
Thanks for the suggestions - they make sense as things to check. I don’t believe I’m duplicating the SideBar, but I double-checked and there is only ever one “SideBar” game object in existence. I also checked the camera and didn’t find any odd settings (I think the only aspects of the main camera I’ve edited are the position and rotation). I’ve probably made some rookie error, but I’m struggling to track it down. At least I have a work-around for the time being.
