Making PWA feel more like an app using CSS overscroll behavior

Introduction

The reason I went about looking for this is because of pull-to-refresh. Here is a demo of pull to refresh.

I am not sure why this is the default behavior but this is not what I would like my apps to have. For my blog post, this makes the blog feel less like native and more like a web app, plus if you see the gif closely when someone overscrolls, then there is a tinge of blue that comes.

The Fix

The fix to this problem is to use the overscroll-behavior CSS property. There are 3 values to this, default/contain/none. This blog post by web.dev does a great job at talking about this CSS property.

What I did in my case was to apply overscroll-behavior to none at the root level, i.e. body tag. As a result of this this “ugly” tinge and pull to refresh was stopped.

Although this CSS property does not have 100% coverage, it has 75% coverage which is pretty decent and I assume most modern browsers would support it.

Here is what my PWA looks like after this change.