Rendering UI elements infront of mesh in 3D space

I changed the z value of text to bring that little front from the image element but still the issue exists. I am just guessing here, is it because of the one sided mesh object that I have? I have a can mesh object which is in cylindrical shape and have nothing inside.

Finally, I found the way to reproduce the issue. The steps,

  1. In hierarchy, disable image elements under pivot entities.
  2. Launch the app
  3. Now, you wont see the image and text element in the launched app.
  4. Enable it now in the editor and if you see now, the text element will go behind the mesh.

Now I understand the reason why I got this issue in my main project is because I am enabling the image and text element on a button click. Hence, at runtime if we enable the text element it is not updating the material it seems. This is what I understand. You have any thoughts @yaustar ?

Solved it. I moved the following lines from initialize to update did the trick.

this.materialAsset.resource.msdfMap = this.entity.element._text._font;

Now even if the text element is enabled or disabled at runtime, the material is updating every frame to the text element. I hope this will be permanent fix. Thanks @yaustar for the support.!!