SurfaceGUI ImageLabel rendering improperly when placed over half the position of another SurfaceGUI ImageLabel

Reproduction Steps

Place one part with a SurfaceGUI, then place a second, smaller part over top of the first one, also with a SurfaceGUI. The 2nd SurfaceGUI, regardless of its height will render beneath the 1st SurfaceGUI.

System Information:
CPU: AMD Ryzen 7 3700X 8-Core Processor
GPU: NVIDIA GeForce RTX 2070 SUPER
Memory: 16 GB

Image:

Place File:
broken place.rbxl (40.2 KB)

Expected Behavior

The SurfaceGUI represented by a tree should render above the SurfaceGUI represented by the background.

Actual Behavior

The SurfaceGUI represented by a tree renders below the SurfaceGUI represented by the background.

Video:


Workaround

Having all ImageLabels under the same frame would fix this, however this severely limits my current workflow.

Issue Area: Engine
Issue Type: Display
Impact: High
Frequency: Constantly

This is caused by transparency sorting. Every transparent object is sorted by depth relative to the camera, and from some camera angles your background comes up as in front of the tree, causing it to render first.

Transparency sorting is not something that we can really fix without impacting performance, but there may be some heuristics that we could do to improve the results in cases like this (like taking which direction the UI is facing into account so that layered planar guis like this will always sort correctly).


Since it looks like you’re making a 2D game, one way you can work around this is to have the camera facing perfectly downwards. This is a bit hard to do, so you might have an easier time if you instead take your entire scene and flip it so that the camera can face forwards instead.

Another thing you can do would be to replace the background with a Decal, which avoids these transparency sorting issues. It looks like you have LightInfluence=1 on the background GUI already, so they should look visually very similar. Note that you will have to rotate the background Part because the Decal is rotated differently from SurfaceGui when placed on the Top face.

3 Likes

Thanks for the explanation / possible solutions! Will definitely try these out.