Scroll Refresher Issue

I have added a custom color to my scroll refresher. Unfortunately, when pulling to refresh, the user can drag down really far. Then, an unsightly white space appears above the refresher section. Any idea how to fix this?

I tried adding some height to the refresher. Oops. Then, I tried some negative margins. That sort of helped, but then the refresher acted glitchy. I suck at CSS. Any suggestions?

Do you have a plnkr where I can work on it?

Here you go :

It seems there is a maximum amount you can pull down to refresh so this css should help with that. So I just messed with the actual hight of the refresher and the top margin. Looks good to me

Here you go

That did the trick. Thanks a lot.