LAMPエンジニアってこういうもんでしょ

こういうもんでしょって話をつらつらと

なかなかみんな言わないけどiOS搭載のモバイルSafariは滅びて良いと思う

IEに関しては様々な人が怒りをあらわにするわけですが
なぜかモバイルSafariに関してはそういう話をする人が少ないように思えます。
林檎信者を批判するわけではないですが
みんなW3C勧告の範囲はちゃんと実装してほしいものです。


今日話題にしたいのは
iOSの超苦手な「position: fixed;」問題です。
そもそも最近まで「position: fixed;」は使えなかったわけで
実装されたと思ったら、描画領域とイベント領域がずれるバグが今でも続いています。
どうも内部挙動としてscrollイベントに前後してイベント領域の再設定をしているような気がします(感覚です)

結果何が起こるかというと
position: fixed;でフローティングさせて画面下部に書き出した要素がある場合
画面中央部を細かくタップしてスクロールさせていくと
突然画面下部のフローティングさせた奴のタッチイベントが発生します。
タッチイベントにエキスパンドアニメーションとか画面遷移とか付けていたらもう絶望ですよね。
残念で仕方ありません。


仕方がないので
touchstart、touchmoveイベントの度に
「本当に該当領域がタップされたのか」を取得しようと思いました。
touchstartイベントの時の座標から計算しようと思ったわけです。
今度はscreenYの値が想定と違うとな・・・？
どうもpageYと同じ値が取れているっぽいぞ・・・？

というわけで以下のような検証ページをつくりました。

<!DOCTYPE html>
<html lang="ja">
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<title></title>
<style>
body {
  height: 1200px;
}
#orverlay {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  height: 100px;
  background-color: rgba(0,0,0,.5);
  color: #fff;
  text-align: center;
}
</style>
</head>
<body>
<div id='orverlay'>
  <p>screenY：<span id='screenY'></span></p>
  <p>pageY：<span id='pageY'></span></p>
</div>
<script>
$(function(){
  // タッチイベント検証
  $(document).on('touchmove', function(ev){
    var touche = ev.originalEvent.targetTouches[0];
    $('#screenY').text(touche.screenY);
    $('#pageY').text(touche.pageY);
  });
});
</script>
</body>
</html>

iPhoneユーザーの方は是非ためしてみて下さい。
見事に数値が一致しますｗｗｗｗ


仕方ないのでpageYを取得している想定で色々ごにょごにょ計算して
該当領域がタップされたかを取得する事に成功しました。
本当にもうありがとうございます(白目


べ、別にみんなで一緒にgoogle信者になろうとか言っていないんだからねっ！////
個人的には火狐が好きとか絶対みんなにはヒミツなんだからぁぁあああ！！！！