Store HTML layout issue. Horizontal black line at center

Sorry, there is no category and tag for this.
HTML layout issue. Horizontal black line at center, seems to from the screenshot-preview.

Pretty sure this is your device user interface. For swiping between apps/tabs/etc

Nope. Absolutely disagree, sorry. That's ordinary iPad mini 6 with latest public stable (not beta) OS and Safari.

  • all extensions are disabled
  • content blockers is On

Also you can found in the demo moments when line is gone, then appears again when scrolling - that is not Safari's UI 100%.

Ok, I understand what line you're talking about. That's not the one. You didn't notice!))

It must be specific to the iPad mini, I can't reproduce on my iPad 9th gen nor on desktop Safari.

Nope, again, sorry. Same on iPhone 13 . Do you need screencast from iPhone? I have one for you :wink:

Os: iOS 17.5.1 (21F90)

I've tested it on iPhone 12, both Safari and Chrome and I'm unable to reproduce it as well

:man_shrugging:t2:
1:

2:

iPhone 11 iOS 17.5.1

Are there specific steps to reproduce the horizontal line?

I don’t know exact way. Just calmly or abruptly scroll the page, navigate to some game, back, scroll, scroll, repeat
 :man_shrugging:t2:
All in the screencasts.

I suppose It may be

  1. Two divs or div and background, both with % pos;
    or
  2. Something with bottom border line and pos in %.
    But I'm just an amateur, not a pro in html.

Really interesting!

You could try inspecting the HTML if you haven't already. You will need a macOS device and connect your phone to Safari on macOS. Here are the steps to enable the inspector and there here are the steps to inspect a webpage.

The maybe you can find the div causing this.

Thanks for pointing out the line! the red arrows were too small for me to notice initially.

:slight_smile:

2 Likes

I haven't been able to reproduce the line issue. But I know I often encounter an issue with the Catalog site where when a page loads, it first shows as zoomed out, because of the navigation. Here's a video of this : https://www.hteumeuleu.fr/wp-content/uploads/2024/07/play-date-funky-menu.480p.mov

In the iOS Simulator, if I hit Debug > Color Blended Layers, it seems to show there's a layer created at pretty much where the line appears for OP, which coincidentally is exactly where the hidden menu ends when opened. So my guess is there's something funky going on between Safari and how the menu is coded on the site.

4 Likes

If you have content blockers, maybe that’s some legitimate popover of some kind, incompletely blocked? What happens with blockers off?

Also, do you have your scaling for the site set different from 100%? Easy to and then forget, with the AA menu. Sometimes that can cause partial-pixel seams that would otherwise not be there.

I don’t see a line on my iPhone 12 Pro Max with 1Blocker on, whether signed into the store or not.

1 Like