WHY is display fixed position busted?

Video Example:

I have a little custom chat widget located fixed position on lower right side of the page. I am puzzled as to why fixed position is not working. I’d like to know WHY its not working.


Live page example:
https://deepdiv-iteration-v3.webflow.io

Designer shared preview:
https://preview.webflow.com/preview/deepdiv-iteration-v3?utm_medium=preview_link&utm_source=designer&utm_content=deepdiv-iteration-v3&preview=6edc520bc283dc73051bcda87ae58b08&mode=preview

Hello @mikeyevin! :slight_smile: Very interesting question.
position: fixed can be broken when following properties are applied to its parent element:

  • transform
  • filter
  • perspective

(more details here)

In your case, you are using a filter in the body which messes up the position.

Now a possible solution would be to remove the filters from your body


and a apply them to a wrapper / container.

2 Likes

@EriCreator

Thanks for sharing that!

Wow never realized the filter breaks child fixed position. I’m gonna have to write a seperate body wrpper and reference that for global filter instead of body. Thanks!

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.