Making viewport units work properly in Mobile Safari

A typical issue with the well supported Viewport Relative Units (you know: vh, vw, vmin, and vmax) that bothers me a lot is that MobileSafari (Safari on iOS) takes the height of the address bar into account for 100vh. Take a look at the footer of that first block in the screenshot below: since its […]

Prevent overscroll/bounce in iOS MobileSafari and Chrome (CSS only)

UPDATE 2017.12: For non-Safari browsers you can use overscroll-behavior to solve exactly this. Simply apply overscroll-behavior-y: none; on the <body> and be done with it. Safari however still requires the workaround detailed below … Know this bouncy overscrolling behaviour that browsers have been doing whenever you reach the “edge” of the page its contents?, […]