I've come across an issue on my site where Safari (18.2) and Chrome (132.0.6834.84) produce radically different results for an absolutely positioned element.
On Chrome, the positioning respects a grandparent div with position:relative (as expected)
On Safari, it positions relative to the parent which has container-type: inline-size set on it.
I've made a CodePen to demonstrate the issue: https://codepen.io/Everybodyknows/pen/gbYjEoY
On Chrome it displays this: Chrome render
On Safari this: Safari render
I don't know if this is a known bug or not. I can't find any reference to it online. I also do not know which behaviour is correct. I'm assuming it is an issue with Safari's implementation? I'd like to know so I can write a work-around for the browser displaying incorrectly.
This looks like a bug. I read somewhere on Reddit that Chrome and Firefox fixed this quickly, but it is only available for now in technical preview in Safari.
I experienced a similar problem. In my case, the position: fixed is based on the container-type: inline-size element, not the viewport.
