Skip to content

Instantly share code, notes, and snippets.

@AlexanderOMara

AlexanderOMara/index.html

Last active February 19, 2019 22:30
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save AlexanderOMara/8747f59b6450878e78c7 to your computer and use it in GitHub Desktop.
Save AlexanderOMara/8747f59b6450878e78c7 to your computer and use it in GitHub Desktop.
Download ZIP
iOS 8 position: fixed; input element workaround
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<title>iOS 8 position: fixed; input element workaround</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
position: relative;
}
#a {
height: 2000px;
background: linear-gradient(red, blue);
}
#b {
position: fixed;
bottom: 20px;
left: 0;
width: 100%;
height: 100px;
background: rgba(0, 0, 0, 0.5);
}
textarea {
width: 80%;
height: 100%;
margin-left: 10%;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b">
<textarea></textarea>
</div>
<script>
//Get the fixed element, and the input element it contains.
var fixed_el = document.getElementById('b');
var input_el = document.querySelector('textarea');
//Listen for touchstart, focus will fire too late.
input_el.addEventListener('touchstart', function() {
//If using a non-px value, you will have to get clever, or just use 0 and live with the temporary jump.
var bottom = parseFloat(window.getComputedStyle(fixed_el).bottom);
//Switch to position absolute.
fixed_el.style.position = 'absolute';
fixed_el.style.bottom = (document.height - (window.scrollY + window.innerHeight) + bottom) + 'px';
//Switch back when focus is lost.
function blured() {
fixed_el.style.position = '';
fixed_el.style.bottom = '';
input_el.removeEventListener('blur', blured);
}
input_el.addEventListener('blur', blured);
});
</script>
</body>
</html>
Raw
without-hack.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<title>iOS 8 position: fixed; input element workaround</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
position: relative;
}
#a {
height: 2000px;
background: linear-gradient(red, blue);
}
#b {
position: fixed;
bottom: 20px;
left: 0;
width: 100%;
height: 100px;
background: rgba(0, 0, 0, 0.5);
}
textarea {
width: 80%;
height: 100%;
margin-left: 10%;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b">
<textarea></textarea>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment