Styling ion-refresher

Ionic Framework
1

I am trying to style the ion-refresher component background on one specific page, because it has a header. It works perfectly on the browser, but on the device, it overlays everything on top. I have tried a lot of things with z-index (also with pseudo element) + positioning absolute, but I cannot get the ion-refresher to sit where it normally is. It either goes under everything (showing the background), or overlays on top.

Screenshot 2022-09-27 at 10.50.04
Screenshot 2022-09-27 at 10.50.041694×756 126 KB

Any ideas on what is causing this difference? (The issue occurs when applying the background color to ion-refresher-content. (Also happens with pseudo element)

My CSS

ion-refresher:global(.ios) {
        height: 120px;

        ion-refresher-content {
            background-color: var(--dark-gray);
        }

        :global(.refresher-pulling-icon) {
            color: white;
        }

        ion-spinner {
            color: white;
        }
    }