Bug 284945 – Query container breaks position: fixed

• Status: NEW
• Component: Layout and Rendering

[Sebastian Zartner]

Created attachment 473603 [details]
Test case

If an element is turned into a query container via container-type, elements within it can not be fixed positioned.
See the attached test case. If the container-type property is removed, the nested element is positioned at the top of the viewport as expected.

For a real test case, see https://www.gamestar.de/artikel/drohnen-new-jersey-usa-ostkueste-lage-deutschland,3424742.html. The video embedded in the article content has a picture-in-picture mode when scrolling away from it, which should be fixed positioned. Though in Safari 18.2 it is stuck at the top and positioned behind the header even with a extremely big z-index set.

I've tested this in Safari 18 on macOS 15 and an iPhone 14. In Chrome 131.0 and Firefox 133.0 the test case works as expected.

Sebastian

[Karl Dubost]

Created attachment 473642 [details]
rendering in safari, firefox, chrome

Hmm, So I haven't been able to reproduce so far. Did the site change in between the bug report and now?

Tested in 
```
Safari Technology Preview  209          20621.1.6
Firefox Nightly            135.0a1       13524.12.16
Google Chrome Canary       133.0.6912.0  6912.0
```

[Karl Dubost]

Created attachment 473643 [details]
rendering in safari, firefox, chrome

Let's try the reduced testcase, The 3 browsers renders the same for me.

[Sebastian Zartner]

Created attachment 473647 [details]
Screenshot of simple test case in Safari 18.1

(In reply to Karl Dubost from comment #1)
> Did the site change in between the bug report and now?

Indeed, the site changed. Due to this bug it got the following rule assigned to turn of the query container:

```css
.article-content {
	container-type: unset;
}
```

Note that I am testing this in BrowserStack, though it got first reported by people on an iPhone.
See the attached screenshot of the simple test case. Note that the issue is mainly visible when the page has overflow.

In BrowserStack, I don't have the possibility to try out the Technology Preview. So it might be that this already got fixed in the meantime.

If you need any additional info, please let me know!

Happy Holidays!

Sebastian

[Sebastian Zartner]

Created attachment 473648 [details]
Screenshot of simple test case on iOS 16.4

[Karl Dubost]

Ah yes this is fixed in 
STP 209 (Safari 18.2, WebKit 20621.1.6)
but not in  (Safari 18.2, WebKit 20620.1.16.11.8)

So it was probably recently fixed, and will be available probably in a future release.

[Sebastian Zartner]

Ah, great! Thanks for the info, Karl! Again, Merry Christmas!

Sebastian

[Radar WebKit Bug Importer]

<rdar://problem/142057904>

Glad to see this was fixed!