Bug 257300

Created attachment 466491 [details]
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.