A user is experiencing a visual glitch on their Shopify store’s header that only appears on iPhones during scrolling—a thin line appears where the background shows through. The issue was demonstrated via a YouTube video and does not occur on Android devices.
Troubleshooting attempts:
Support response:
The official support representative could not reproduce the problem when testing on an iPhone with Safari, suggesting the header displays correctly on their end. They recommended contacting live support through the Help Center for further investigation.
Technical insight:
Another community member suggested this appears to be an anti-aliasing issue caused by CSS elements using fractional pixel values (e.g., “height: 36.5px”) instead of whole numbers. They recommend checking that all element heights, margins, paddings, and borders use full pixel measurements, as fractional values can create visual artifacts on specific devices or screen resolutions.
The user is now seeking guidance on which specific elements to examine first.
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
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.
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?
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.
it’s not a payment page, the problem is only on the home page
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.
ok fine, but just one piece of information, from which device did you view my site?
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.
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