I was working on one of my clients' projects and just faced this weird issue that position:fixed was working perfectly on Desktop (Mac & PC), and also was working on iPhone (all browsers), but only didn't work on android mobile browsers, here I talk about how I resolved it by coincidence!

This is my body:

body {
  backdrop-filter: blur(1px);
  background-image: $primary-linear;
  overflow-y: scroll;
  overflow-y: overlay;
  overflow-x: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(
      safe-area-inset-left
    ) !important;
}

Easily removed this line:

body {
  backdrop-filter: blur(1px);
}

That's it!

Hi there! Want to support my work?