Matt mattywong

Mobile Safari's 100% Height Dilemma

Whether you're developing a web application with native-ish UI, or just a simple modal popup overlay that covers the viewport, when it comes to making things work on iDevices in Mobile Safari, you're in for a decent amount of pain and suffering. Making something "100% height" is not as easy as it seems.

This post is a collection of Mobile Safari's gotchas and quirks on that topic, some with solutions and fixes, some without, in good parts pulled from various sources across the internets, to have it all in one place. Things discussed here apply to iOS8, iOS9 and iOS10.

The Disappearing Browser Chrome

Screen real estate on smartphones is limited, so Mobile Safari collapses the browser chrome (address bar and optional tab bar at the top, and tool bar at the bottom) when the user scrolls down. When you want to make something span exactly the height of the viewport, or pin something to the bottom of the screen, this can get tricky because the viewport changes size (or

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

Fix SVG in `<img>` tags not scaling in IE9, IE10, IE11

IE9, IE10, and IE11 don't properly scale SVG files added with img tags when viewBox, width and height attributes are specified. View this codepen on the different browsers.

Image heights will not scale when the images are inside containers narrower than image widths. This can be resolved in 2 ways.

Use `sed` in bash to remove width and height attributes in SVG files

As per this answer on Stackoverflow, the issue can be resolved by removing just the width and height attributes.

	rem see https://github.com/coreybutler/nvm-windows/issues/300

	@echo off
	SETLOCAL EnableDelayedExpansion

	if [%1] == [] (
	echo Pass in the version you would like to install, or "latest" to install the latest npm version.
	) else (
	set wanted_version=%1

	/* -------------------------------------------------------------------------- */
	// All Bootstrap 4 Sass Mixins [Cheat sheet]
	// Updated to Bootstrap v4.5.x
	// @author https://anschaef.de
	// @see https://github.com/twbs/bootstrap/tree/master/scss/mixins
	/* -------------------------------------------------------------------------- */

	/*
	// ########################################################################## */
	// New cheat sheet for Bootstrap 5:

	import { createCipheriv, createDecipheriv, randomBytes } from "crypto";

	const ENCRYPTION_KEY: string = process.env.ENCRYPTION_KEY \|\| ""; // Must be 256 bits (32 characters)
	const IV_LENGTH: number = 16; // For AES, this is always 16

	/**
	* Will generate valid encryption keys for use
	* Not used in the code below, but generate one and store it in ENV for your own purposes
	*/
	export function keyGen() {