Bug 272318

<rdar://problem/126081715>

This can be tested on desktop too by reducing the viewport size to around 700px max The markup is: <a href="/search" aria-controls="header-search-sections--16755375997097__header" aria-expanded="true"> <span class="sr-only">Open search</span><svg aria-hidden="true" fill="none" focusable="false" width="24" class="header__nav-icon icon icon-search" viewBox="0 0 24 24"> <path d="M10.364 3a7.364 7.364 0 1 0 0 14.727 7.364 7.364 0 0 0 0-14.727Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10"></path> <path d="M15.857 15.858 21 21.001" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"></path> </svg></a> On desktop when clicking, the `lock` class value is added to the html element and this custom `header-search` element is switched from display:none to display: block <header-search id="header-search-sections--16755375997097__header" class="header-search" role="dialog" style="display: block; --header-search-max-height: 761.8125px;" open=""> <div class="container"> <form id="predictive-search-form" action="/search" method="GET" aria-owns="header-predictive-search" class="header-search__form" role="search"> <div class="header-search__form-control"><svg aria-hidden="true" fill="none" focusable="false" width="20" class="icon icon-search" viewBox="0 0 24 24"> <path d="M10.364 3a7.364 7.364 0 1 0 0 14.727 7.364 7.364 0 0 0 0-14.727Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10"></path> <path d="M15.857 15.858 21 21.001" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"></path> </svg><input type="search" name="q" spellcheck="false" class="header-search__input h5 sm:h4" aria-label="Search" placeholder="Search for..."> <button type="button" is="dialog-close-button"> <span class="sr-only">Close</span><svg aria-hidden="true" focusable="false" fill="none" width="16" class="icon icon-close" viewBox="0 0 16 16"> <path d="m1 1 14 14M1 15 15 1" stroke="currentColor" stroke-width="1.5"></path> </svg> </button> </div> </form> <predictive-search id="header-predictive-search" class="predictive-search"> <div class="predictive-search__content" slot="results"></div> </predictive-search> </div> </header-search> When the non working mode is starting, the `--header-height` on html element switches from 75px to 55px. The lock attribute is correctly set, and the header-search is correctly set to display: block. it is somehow not visible. The reason is that .header-search { z-index: -1; width: 100%; display: none; position: absolute; inset-block-start: 100%; inset-inline-start: 0; } set the layer under the rest of other layers. Removing the z-index here fixes the issue and it has no impact on Firefox and Chrome on the mobile layout. So there's definitely a difference of behavior where a reduced test case should be determined, but at least for this site there is a solution.

Created attachment 470829 [details] recording of the layer swapping positions There is another element in the page probably coming into play. Because if I remove everything but the header element. Things are working as expected. By reducing the size of the caroussel for the cake we can better see what is happening, see the recording to see the layers being swapped.

I'm switching to layout and rendering.

The .scroll-area { overflow: auto hidden; } seems to matter. This is specified on `<scroll-carousel>`

The URL for the reported issue can no longer be accessed.

@mic.gallego Do you still experience the issue?

Hello, The issue is no longer reproducible so it have probably been solved already ;).

Thanks a lot for the quick answer. I'm closing. :)

Hello Karl, Unfortunately I was wrong (I confused this with a different issue), this issue is still reproducible. We had another merchant facing the issue, I asked them to not touch their theme, but if you could create a local copy that would help. To reproduce the issue, open this page: https://sammylunadesigns.de/products/biothane-hundeleine-konfigurieren?preview_theme_id=169697182045 On iOS (other browsers work as expected), click on the "Search" icon in the header, and you will see the main featured image appearing on top of the search, while other browsers do not. The issue started to appear in iOS16, as it works correctly on Safari 15.4 and lower.

Created attachment 471742 [details] firefox-ios On Firefox iOS

Created attachment 471743 [details] safari-ios On Safari iOS

Both are working for me, this on iOS 18.0 beta 2 (22A5297f)

Created attachment 471745 [details] different-layout On the simulator I receive the same design than on the device. But this becomes different when using responsive design mode. Interesting. UA Simulator and device: "Mozilla/5.0 (iPhone; CPU iPhone OS 18_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.0 Mobile/15E148 Safari/604.1" Responsive Design UA: "Mozilla/5.0 (iPhone; CPU iPhone OS 17_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4 Mobile/15E148 Safari/604.1" The design received on Responsive Design exhibits the issue, not on mobile and simulator. The files sent in the <head> section are totally different. Markup for the cart: Responsive Design: ================== <a href="/cart" class="relative"> <span class="sr-only">Warenkorb öffnen</span><svg aria-hidden="true" fill="none" focusable="false" width="24" class="header__nav-icon icon icon-cart" viewBox="0 0 24 24"> <path d="M2 10h20l-4 11H6L2 10Zm14-3a4 4 0 0 0-8 0" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </svg><cart-dot class="header__cart-dot "></cart-dot> </a> Simulator and Mobile Device =========================== <a href="/cart" class="Header__Icon Icon-Wrapper Icon-Wrapper--clickable " data-no-instant=""> <span class="hidden-tablet-and-up"><svg class="Icon Icon--cart " role="presentation" viewBox="0 0 17 20"> <path d="M0 20V4.995l1 .006v.015l4-.002V4c0-2.484 1.274-4 3.5-4C10.518 0 12 1.48 12 4v1.012l5-.003v.985H1V19h15V6.005h1V20H0zM11 4.49C11 2.267 10.507 1 8.5 1 6.5 1 6 2.27 6 4.49V5l5-.002V4.49z" fill="currentColor"></path> </svg></span> <span class="hidden-phone"><svg class="Icon Icon--cart-desktop " role="presentation" viewBox="0 0 19 23"> <path d="M0 22.985V5.995L2 6v.03l17-.014v16.968H0zm17-15H2v13h15v-13zm-5-2.882c0-2.04-.493-3.203-2.5-3.203-2 0-2.5 1.164-2.5 3.203v.912H5V4.647C5 1.19 7.274 0 9.5 0 11.517 0 14 1.354 14 4.647v1.368h-2v-.912z" fill="currentColor"></path> </svg></span> <span class="Header__CartDot "></span> <div class="menudesc">Warenkorb</div> </a> @mic.gallego, Do you know if there is content negotiation based on certain criteria and in this case which one(s)? Thanks.

Hi, The screenshot is coming from a different version. You need to make sure to use the URL I provided (https://sammylunadesigns.de/products/biothane-hundeleine-konfigurieren?preview_theme_id=169697182045) The preview_theme_id query string is important so that you preview the correct theme (the correct theme has a white header).

I can reproduce this on macOS as well by making the Safari window as narrow as possible. Going to bisect this to see when it regressed.

This regressed between 249827@main (pass) and 249830@main (fail). Looking at that commit range, the obvious candidate is 249828@main, the fix for 238589, so I'm going to mark that commit as the regression point.

Another commit contributes to making this bug happen: 254746@main, the fix for bug 244543. Indeed, as of 249828@main, the animation to display the search field became flickery and rarely the search field itself would not be visible at the end of the animation. But as of 254746@main, the search field stopped being visible after the animation. So this bug is caused by both 249828@main and 254746@main.

Oh thanks. Antoine!

Thanks a lot for digging on this issue. Please let us know once this is fixed so we can inform all our impacted merchants using our themes :)

Created attachment 471760 [details] Reduced test case

Hello, This issue is still reproducible on iOS 18. Is there any timeline on when this issue will be fixed? This is impacting all the customers of our themes and we would like to let them know that this is being worked on.

Apple engineers, who are the most likely people to address this issue, cannot comment on when this bug, or any bug, may be scheduled for a fix. We are, however, aware of the issue. Sorry we cannot provide more information at the moment.