a-text disappears when covered by transparent a-sphere

Question

See the image below. Pardon if this is something obvious I'm missing - I'm new to A-frame and couldn't find anything about this anywhere.

Basically, when I pass a semi-transparent sphere in front of a text entity, the text disappears. It's SO WEIRD.

Here's my code:

<a-scene>
    <a-entity camera look-controls>
      <a-entity id="wand" position="0 -4 -4">
        <a-torus position="0 3.75 0" radius="1.25" radius-tubular=".02" segments-tubular="50" color="#ff5555">
            <a-sphere scale="1.25 .2 1.25" rotation="0 90 90" material="side: double; color: #ffffff; transparent: true; opacity: 0.2"></a-sphere>
        </a-torus>
        <a-box position="0 0 0" height="5" depth=".1" width=".2" color="#ff5555"></a-box>
      </a-entity>
    </a-entity>
    <a-text value="HELLO" position="0 0 -4" geometry="primitive:plane"></a-text>
    <a-sky color="#87cefa"></a-sky>
</a-scene>
</body>

Answer 1

By default objects are rendered in order they are added to scene. Swap the order of your sphere and text defined in the HTML