Three problems in mobile web

Overscroll

Overscroll in mobile devices is only on windows. And if you have a block that has its own scroll, it, unfortunately, will not work, but for this, too, there was a solution:

if (this.el.scrollTop <= 0) {
   this.el.scrollTop = 1;
} else if (this.el.scrollTop >= this.el.scrollHeight - this.el.offsetHeight) {
   this.el.scrollTop = this.el.scrollHeight - this.el.offsetHeight - 1;
}

Fixed+Transform

Most likely, everyone is familiar with the problem: if there is a fixed block, and one of his parents applies the transformation, then all the fixed blocks begin to leave.
This is a very sneaky bug that sometimes makes the animation of our mobile interface very bad.

Solution: remember the position of the fixed blocks before the transformation and turn them into absolute with the top property.

It's a little complicated, but in general, you can handle it if you need to.

Safe-insets

Since we are on the mobile web, we have a huge number of devices, one of them is iPhone X with new frames.

What to do if these frameworks at you get out and your interface looks not so beautiful as you wanted?

Solution: use this documentation https://ayogo.com/blog/ios11-viewport/

What problems do you know in the mobile web?