This is a similar problem with IOS 5 (safari) bug with HTML touch events on "position:fixed" div
Somebody said that this bug has been fixed. But, on iOS 8, I find it is only fixed when you tap and scroll the page SLOWLY.
Here is my codes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Document</title>
<style>
header {
position: fixed;
width: 100%;
height: 600px;
top: 0;
color: #fff;
background: rgba(0, 0, 0, 0.9);
z-index:100;
}
.content {
height: 10000px;
background: url(http://placehold.it/350x150&text=Background);
}
</style>
</head>
<body>
<header></header>
<section class="content"></section>
<script type="text/javascript" src="jquery.js"></script>
<script>
(function($) {
'use strict';
$('header').on('touchend', function(event) {
event.stopPropagation();
$('<p>Tap on float content.</p>').appendTo('header');
// hack 1
var $temp = $('<div style="height: 20000px"></div>');
$temp.appendTo('body');
setTimeout(function(){
$temp.remove();
}, 1);
});
$(document).on('touchend', function() {
$('<p>Tap on UNDER content.</p>').appendTo('header');
});
// hack 2
$('body').bind('touchstart', function(e) {});
}(jQuery));
</script>
</body>
</html>
You can find the bug in these two different ways:
- fast swipe and scroll the page on the
<head>area for several times. - swipe on the .content area, then quickly tap on the
<header>area before the page stop scrolling.
In both cases, sometimes you can find that "Tap on UNDER content." is output when you tap on the <header> area.
Update:
There is 3rd case:
- swipe on the .content area, then quickly tap on the .content area again before the page stop scrolling, then tap on the
<header>area. In this case, the tap on the<header>area doesn't output anything.
I've tried the hacks, like "add touchstart event for <body>", "add temporary <div>". None of them works.
Any idea on how to fix this? Thanks.
