Bug 272318 – REGRESSION (249828@main, 254746@main): Incorrect z-ordering with negative z-index and compositing

• Status: ASSIGNED
• Component: Compositing

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.

[Radar WebKit Bug Importer]

<rdar://problem/126081715>

[Karl Dubost]

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]

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]

I'm switching to layout and rendering.

[Karl Dubost]

The

.scroll-area {
    overflow: auto hidden; 
}

seems to matter. This is specified on `<scroll-carousel>`

[Antoine Quint]

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

[Karl Dubost]

@mic.gallego

Do you still experience the issue?

Hello,

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

[Karl Dubost]

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.

[Karl Dubost]

Created attachment 471742 [details]
firefox-ios

On Firefox iOS

[Karl Dubost]

Created attachment 471743 [details]
safari-ios

On Safari iOS

[Karl Dubost]

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

[Karl Dubost]

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).

[Antoine Quint]

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]

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]

rdar://130595406

[Antoine Quint]

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]

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 :)

[Simon Fraser (smfr)]

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.

[Antoine Quint]

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.