When working with Viewport Units there’s this longstanding and extremely annoying bug in Safari on iOS where it does not play nice with the vh unit. Setting a container to 100vh for example will actually result in an element that’s a wee bit too high: MobileSafari ignores parts of its UI when calculating 100vh. Image […]
Tag Archives: mobilesafari
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? Bram.us, […]