admin管理员组

文章数量:1208155

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:

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.

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.

  • css
  • google-chrome
  • safari
  • position
Share Improve this question edited Jan 19 at 16:34 keir watson asked Jan 19 at 16:30 keir watsonkeir watson 33 bronze badges 1
  • Please provide enough code so others can better understand or reproduce the problem. – Community Bot Commented Jan 19 at 17:05
Add a comment  | 

1 Answer 1

Reset to default 0

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.

本文标签：

版权声明：本文标题：css - Different results on Chrome and Safari for absolutely positioned elements when container-type: inline-size is set - Stack 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1738731716a2109361.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。