ASSIGNED Bug 272318
REGRESSION (249828@main, 254746@main): Incorrect z-ordering with negative z-index and compositing
https://bugs.webkit.org/show_bug.cgi?id=272318
Summary REGRESSION (249828@main, 254746@main): Incorrect z-ordering with negative z-i...
mic.gallego
Reported 2024-04-07 21:47:24 PDT
Created attachment 470810 [details] Safari bug Hi, I have found yet another issue on Safari that happens on the final state of the animation. It seems Safari creates a stacking context that cause content to be hidden. It works correctly in Safari 15.4, but starts failing in Safari 16. Both Firefox and Chrome are working as expected. I have been unable to isolate the issue, so you will need to check on a demo store we have set up. To reproduce the issue: 1. Open this URL: https://prestige-support.myshopify.com/products/cake?preview_theme_id=135840366761 2. Enter the password rewblo to enter into the site, and go back to the product page. 3. In mobile mode, click on the Search icon to open the search. The search will appear during the animation, but the search bar won't be visible at the end. Please see the attached video that also exhibit the issue. Thanks.
Attachments
Safari bug (3.94 MB, video/quicktime)
2024-04-07 21:47 PDT, mic.gallego
no flags
recording of the layer swapping positions (5.33 MB, video/quicktime)
2024-04-08 19:59 PDT, Karl Dubost
no flags
firefox-ios (666.67 KB, image/png)
2024-06-25 21:07 PDT, Karl Dubost
no flags
safari-ios (843.78 KB, image/png)
2024-06-25 21:08 PDT, Karl Dubost
no flags
different-layout (474.74 KB, image/png)
2024-06-25 21:32 PDT, Karl Dubost
no flags
Reduced test case (939 bytes, text/html)
2024-06-27 21:28 PDT, Simon Fraser (smfr)
no flags
Radar WebKit Bug Importer
Comment 1 2024-04-08 10:16:33 PDT
Karl Dubost
Comment 2 2024-04-08 19:07:34 PDT
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.
Karl Dubost
Comment 3 2024-04-08 19:59:28 PDT
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.
Karl Dubost
Comment 4 2024-04-08 20:00:19 PDT
I'm switching to layout and rendering.
Karl Dubost
Comment 5 2024-04-08 21:52:18 PDT
The .scroll-area { overflow: auto hidden; } seems to matter. This is specified on `<scroll-carousel>`
Antoine Quint
Comment 6 2024-06-07 00:54:04 PDT
The URL for the reported issue can no longer be accessed.
Karl Dubost
Comment 7 2024-06-18 00:21:48 PDT
@mic.gallego Do you still experience the issue?
mic.gallego
Comment 8 2024-06-18 02:29:21 PDT
Hello, The issue is no longer reproducible so it have probably been solved already ;).
Karl Dubost
Comment 9 2024-06-18 02:41:06 PDT
Thanks a lot for the quick answer. I'm closing. :)
mic.gallego
Comment 10 2024-06-25 19:09:00 PDT
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.
Karl Dubost
Comment 11 2024-06-25 21:07:32 PDT
Created attachment 471742 [details] firefox-ios On Firefox iOS
Karl Dubost
Comment 12 2024-06-25 21:08:04 PDT
Created attachment 471743 [details] safari-ios On Safari iOS
Karl Dubost
Comment 13 2024-06-25 21:09:09 PDT
Both are working for me, this on iOS 18.0 beta 2 (22A5297f)
Karl Dubost
Comment 14 2024-06-25 21:32:27 PDT
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.
mic.gallego
Comment 15 2024-06-25 22:22:46 PDT
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).
Antoine Quint
Comment 16 2024-06-26 03:10:53 PDT
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.
Antoine Quint
Comment 17 2024-06-26 09:04:47 PDT
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.
Antoine Quint
Comment 18 2024-06-26 09:06:38 PDT
Antoine Quint
Comment 19 2024-06-26 11:58:24 PDT
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.
Karl Dubost
Comment 20 2024-06-26 17:02:47 PDT
Oh thanks. Antoine!
mic.gallego
Comment 21 2024-06-26 21:32:50 PDT
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 :)
Simon Fraser (smfr)
Comment 22 2024-06-27 21:28:32 PDT
Created attachment 471760 [details] Reduced test case
mic.gallego
Comment 23 2024-09-26 00:11:54 PDT
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.
Antoine Quint
Comment 24 2024-09-27 02:00:32 PDT
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.
Note You need to log in before you can comment on or make changes to this bug.