I’m piecing together a UI for a project and I’ve encountered a strange error that I’m not sure how to resolve. Part of my UI includes a top-bar of different menu selection buttons which partially overlap each other and are positioned using a horizontal layout group with negative spacing between each element. The layout group lays the buttons out left-to-right and the left buttons should appear in front of the right buttons, which presents a problem, as the UI ends up sorting the buttons’ draw order backwards in the hierarchy and the right-most buttons end up covering up the left-most buttons instead. Not a huge issue, I thought, I’ll just add canvas components to each button and specify to override the sorting input values to create a reversed sort order to solve the problem. Which works… sometimes. For whatever reason, the buttons will revert the draw order backwards on occasion (usually when I press play) and the only way to fix the problem is to delete and re-enter the Sort Order value of each button, even though I’m not functionally changing anything. Is there a better way to do this? Am I maybe running into a bug or something? Everything looks fine from the scene view, it’s only within the game view that I’m seeing the problem.
Oh hey I figured it out! In the root canvas, I switched the Render Mode from Screen Space - Overlay to Screen Space - Camera and then pulled the plane distance in to 0.02. Now the override sorting in the child canvas components actually looks to be working properly.