Problem with the transparent-nav on iphone, a horizontal line always appears

I have a problem that I can’t resolve and I am going crazy, is simple and I am sure someone solved. I put a picture on top , then set my bar to be transparent . This works perfectly in the preview on my browser , but does not work correctly on my iphone, a horizontal line appears at the top. Below I show 2 images :

See the Pen JoedZr by Gaston Flores (@gastoncesarf) on CodePen.

Any idea for this? Thanks

Try adding background-image: none

@mhartington Thanks It worked perfectly!. Also it works with

<ion-nav-bar class="bar-clear"... 

but I think that your solution is much better. Thanks again.