{"id":4904,"date":"2025-01-03T14:16:32","date_gmt":"2025-01-03T19:16:32","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=4904"},"modified":"2025-01-03T14:16:34","modified_gmt":"2025-01-03T19:16:34","slug":"containers-context","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/containers-context\/","title":{"rendered":"Containers & Context"},"content":{"rendered":"\n

I ran into what I thought was a z-index<\/code> bug in Safari (or, Safari had it right and Chrome and Firefox had it wrong). I made a reduced test case here<\/a>. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

But it’s not a bug.<\/p>\n\n\n\n

Stephanie Eckles let me know<\/a> about a change to the specs<\/a>:<\/p>\n\n\n\n

\n

RESOLVED: container-type does not force layout containment, but does force an independent formatting context<\/code><\/p>\n<\/blockquote>\n\n\n\n

This apparently means declaring a container doesn’t<\/em> force a new formatting context anymore and thus my negative z-index<\/code> would “work” as I wanted it to. <\/p>\n\n\n\n

Chrome and Firefox have made the change and it out in the stable version of those browsers. Safari’s update<\/a> will roll out… at some point.<\/p>\n\n\n\n

That’s an interesting situation isn’t it?! It looks and feels like a bug, but really it’s just a situation of a spec change and varied levels of browser support for that change. It’s not a matter of support-or-no-support of a feature, it’s a side effect. As far as I know, not practically testable. Just something that has to be lived with until all browsers implement it the same. <\/p>\n\n\n\n

It’s a decently beefy change (affecting important stuff like positioning), and almost certainly for the better (because you can still force a formatting context if you want, it’s just nice to have the option). Since I became aware of this, I helped someone else having the same problem. In both cases, we totally aborted what we were trying to do as there didn’t seem to be any workaround that felt great. Probably a metaphor in there somewhere.<\/p>\n\n\n\n

Despite improved tools over the years (i.e. @supports<\/code> and CSS.supports()<\/code>) sometimes figuring out browser support is still just hard. Guaranteed I would have been tripped up by Stoyan Stefanov’s issue with @supports and @font-face troubles<\/a> as well. Good thing we blog, eh? <\/p>\n","protected":false},"excerpt":{"rendered":"

If you’ve applied `container` to an element, know that, for the next little while, that makes a new “formatting context” in Safari, and does not in Chrome or Firefox.<\/p>\n","protected":false},"author":1,"featured_media":4916,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[47,7,275],"class_list":["post-4904","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-container-queries","tag-css","tag-z-index"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/01\/pexels-photo-906494.jpeg?fit=1880%2C1233&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/4904","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=4904"}],"version-history":[{"count":3,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/4904\/revisions"}],"predecessor-version":[{"id":4917,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/4904\/revisions\/4917"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/4916"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=4904"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=4904"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=4904"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}