Why is there a line on my iPhone header when scrolling?

[Jhon16]

Hi everyone, I would like to ask for help with a problem I'm having.

This problem only occurs on iPhone. Simply put, when I scroll down the page, the header shows a line where the back part is visible.

Do you know why this happens?

I uploaded a video to YouTube and highlighted the problem with red arrows.

However, on Android, it looks good

Thank you in advance for anyone who answers.

Link Youtube: https://youtu.be/nufQ9F2DBX4

My site: https://a3cd78.myshopify.com

[Ollie]

Hey @Jhon16.
 
Thanks for reaching out. 
 
I appreciate that you have provided your online store URL for us to take a further look! When I navigated to your online store using a mobile device, I did not experience any loading issues within the store checkout. With that being said, could you attempt to clear the cache on your browser and try navigate to the store checkout again, by any chance?
 
In some cases, clearing the cache from your browser can fix minor issues that you may experience on the Shopify platform. If the issue persists, I would suggest trying a separate browser - for example, if you are using Safari - try this on Google Chrome.
 
Let me know if that does the trick. 

[Jhon16]

Hi, thanks for replying to me.

So I tried with Chrome but there's the same problem, that little space comes out, believe me, I don't know what to do.

I also tried in hidden mode with chrome, but nothing happened.

Can I ask you what device you used to view my site?

[Ollie]

Hey @Jhon16.
 
Thanks for the quick response. 
 
When I tested the online store checkout - I used an iPhone with the Safari browser. With that being said, if the issue that you are experiencing is still occurring after you have cleared the cache on your browser. It would be best to reach out to our live support to have a further look into the situation.
 
You can get in touch with our live support by navigating to our Help Center. 
 
Let me know if you have any questions. 

[Jhon16]

it's not a payment page, the problem is only on the home page

[Ollie]

Hey @Jhon16.
 
Thanks for the clarification and response. 
 
Looking back into this on the homepage and header navigation bar, I am not receiving the issue on my side. The header navigation is properly displaying and is only taking up a small percentage of the mobile screen. In this case, it would still be best to reach out to our live support to have a further look into the theme by using the Help Center link above.
 
Let me know if you have any questions. 

[Jhon16]

ok fine, but just one piece of information, from which device did you view my site?

[SpyProtect]

It looks like anti-aliasing issue. Likelihood is that there are some elements with heights, margins, paddings or borders that are not full pixels but some fraction of one. For example, "height: 36.5px;" may create anti-aliasing artefacts on specific devices or screen resolutions. The only real fix in these cases would be to make sure that all elements are made up of full pixel measurements.

[Jhon16]

Hi SpyProtect, how can I check this?

That is, in your opinion, what is the element that I can examine first of all?

Thank you