[Webkit-unassigned] [Bug 257300] New: Inconsistent rendering with position: relative and position: sticky

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=257300

            Bug ID: 257300
           Summary: Inconsistent rendering with position: relative and
                    position: sticky
           Product: WebKit
           Version: Safari 16
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: mic.gallego at gmail.com

Created attachment 466491

  --> https://bugs.webkit.org/attachment.cgi?id=466491&action=review

image

Hi,

We are experiencing an odd behavior that happens only in Safari. I was unable to isolate a minimal use case, so it might be a combination of different things, sorry about that.

To reproduce the issue, 

1. Open this page: https://ana-lucia-dev-store.myshopify.com/products/automatic-gravity-fed-spice-grinder-with-adjustable-coarseness-and-led-flashlight
If Shopify asks you a password, enter diayau and navigate again to the product page.

2. In the header, click on the search icon to display the search bar. On Safari exclusively, the search bar appears below the images (left element in the capture).

3. If you change the position of the header from position: relative to position: sticky, then Safari renders it properly. However, from my understanding, both position: sticky and position: relative should create a stacking context in the same way, so this difference in behavior seems like a bug in Safari.

Let me know if anything is unclear.

Thanks.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20230525/927d12ac/attachment-0001.htm>