Why is the back layer sometimes rendering in front?

I have a layer rendering issue, where the top layer of content will sometimes not render to screen as it appears that the bottom layer is rendering on top (even though it's behind in world space). It happens randomly, sometimes they render correctly.

Both layers are part of a UI button:

• Front layer: the UI Text with the standard Font Material that Unity generated from the TTF font
  • z-index -10 (closer to the camera)
• Back layer: Bg Quad with a custom shadered material in the Transparent render queue
  • z-index 0

Here's what it looks like in Scene view when the issue is present:

Here's what it looks like without issue:

Again, in Game View with issue present:

Game View without issue:

I also made sure that the Bg game object is ordered first before the Text object in Hierarchy view to ensure that if the renderer is deciding which to render first based on hierarchy order, the bg will still be drawn first:

It seems like the shader rendering the background is not respecting the world space z-index, but I'm not sure why this happens at all, let alone only sometimes, seemingly randomly.

Here's the background shader, which is simply rendering a given color with possible alpha:

Shader "Custom/Color"
{
    Properties
    {
        _Color("Color", Color) = (1,1,1,1)
    }
        SubShader
    {
        Tags{ "RenderType" = "Transparent" "Queue" = "Transparent" }

        Blend SrcAlpha OneMinusSrcAlpha // Traditional transparency

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            fixed4 _Color;

            v2f vert(appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                return o;
            }

            fixed4 frag(v2f i) : SV_Target
            {
                return _Color;
            }
            ENDCG
        }
    }
}

Any ideas why is this happening and how to stop it?

I imagine there's some kind of race condition in how Unity is deciding which layer to render first...