Timur Olzhabayev tolzhabayev

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

	name: Add Issue to project
	on:
	issues:
	types: [opened]

	jobs:
	track_issue:
	runs-on: ubuntu-latest
	steps:
	- name: Get project data

	import React, {Component} from 'react';
	import {SafeAreaView, Text, View, Alert, Button, Switch} from 'react-native';
	import Sound from 'react-native-sound';

	class App extends Component {
	constructor(props) {
	super(props);

	Sound.setCategory('Playback', true); // true = mixWithOthers

	#!/bin/bash

	S3_BUCKET_NAME=$1
	CF_ID=$2

	# Sync all files except for service-worker and index
	echo "Uploading files to $S3_BUCKET_NAME..."
	aws s3 sync build s3://$S3_BUCKET_NAME/ \
	--acl public-read \
	--exclude service-worker.js \

	#!/bin/bash

	# This file can be called as program
	# (it will output the assignment of the REGISTRY environment variable for convenience with `eval $(aws-ecr-login)`)
	# OR sourced in .bashrc or .zshrc
	# (in that case it will directy set the REGISTRY environment variable and have no output)

	function aws-ecr-login {
	if [ -z "${AWS_REGION:-}" ]; then
	echo "environment variable AWS_REGION required" >&2

	files:
	"/home/ec2-user/new_relic_servers_setup.sh":
	mode: "000755"
	owner: root
	group: root
	content: \|
	#!/usr/bin/env bash
	printf "license_key: $NEW_RELIC_LICENSE_KEY" \| sudo tee /etc/newrelic-infra.yml
	printf "[newrelic-infra]\nname=New Relic Infrastructure\nbaseurl=http://download.newrelic.com/infrastructure_agent/linux/yum/el/6/x86_64\nenable=1\ngpgcheck=0" \| sudo tee /etc/yum.repos.d/newrelic-infra.repo
	yum -q makecache -y --disablerepo='*' --enablerepo='newrelic-infra'