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?
Top comments (0)