SVG mask to work with Android

I am having problems with my SVG mask on android device, it gives a square box when it should be transparent

<svg width="0" height="0">
     <mask id="mask">
        <path xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#ff0000" stroke-miterlimit="10" stroke-width="4" d="M 34 2 c 11.6 0 21.8 6.2 27.4 15.5 c 2.9 4.8 5 16.5 -9.4 16.5 h -4"></path>
     </mask>
</svg>

      

        
        
        
      

    

Here is the full codepen code

Thanks in advance.

**** UPDATE ******

The picture on the left is on the iPhone, on the right is the android.

You will be able to see what I mean if you are using Chrome Checker Manager and select galaxy s4. Unfortunately, I cannot minify the code as part of it.

The square is clipped by the above code snippet which is in the HTML file, it must be an SVG mask.