Hello @Iulia1
From the screenshot, the line does not look like Chrome’s address-bar animation. It appears inside the webpage and passes across the product content, which usually points to a theme element being temporarily rendered in the wrong position while the page initializes.
Chrome on iPhone uses WebKit for page rendering, just like Safari, although Chrome has its own browser interface and can still behave differently during loading.
The most likely causes in the Purity theme are:
- A fixed or sticky mobile element, such as the bottom navigation, sticky add-to-cart bar, announcement bar, or loading overlay.
- A page-transition element with a background or border that is animated using
transform: translateY(...).
- A parent element using
transform, translate3d, or will-change, which can cause fixed-position elements to be painted incorrectly in WebKit.
- JavaScript adding the final gallery or sticky-bar classes only after the page has already become visible.
The green and black bands visible in the screenshot make me suspect the mobile sticky navigation or sticky add-to-cart section rather than image lazy loading.
I would debug it by temporarily disabling these features one at a time in the theme editor:
- Sticky add-to-cart.
- Mobile bottom navigation.
- Page-loading or page-transition animation.
- Announcement or promotional bars.
- App embeds that add sticky widgets.
Also test a clean, unpublished copy of the latest Purity theme. If the line disappears in the clean copy, the cause is probably a customization or app script. If it still occurs, it is likely a theme bug that should be reported to NextSky with the screen recording, iPhone model, iOS version, Chrome version, product URL, and Purity theme version.
A developer should inspect the moving line in Chrome using Safari’s remote Web Inspector from a Mac. While the page is loading, look for elements using:
position: fixed;
position: sticky;
transform: translateY(...);
transform: translate3d(...);
transition: transform ...;
will-change: transform;
border-top: ...;
box-shadow: ...;
As a temporary diagnostic test, you can add the following to the theme’s Custom CSS:
@supports (-webkit-touch-callout: none) {
body {
overflow-x: hidden;
}
.sticky-add-to-cart,
.mobile-bottom-navigation,
.page-loading,
.page-transition {
transform: none !important;
animation: none !important;
transition: none !important;
}
}
The class names above are examples and must be replaced with the actual Purity selectors. I would not leave this code permanently until the exact moving element has been identified, because it could disable intended sticky behavior or animations.
