Android 4標準ブラウザのバグっぽいのを見つけた。

overflow: autoではみ出した要素は見えないようにして
その中でposition: relativeなリンクを宣言して
はみ出て見えなくなっているそのリンクをタップすると、本来ならばタップできないはずなのに、貫通してタップできてしまう

というバグっぽいものをAndroid 4.1.2のシミュレーターで確認した。別の書き方(overflow: hiddenとか)でも起こるかもしれない。 Android 4.1.2以外のAndroid端末でも起こるかもしれない(Android 2.3.3シミュレーターの標準ブラウザでoverthrow.jsを使ってoverflow: auto動くようにした状態だと問題は起こらなかった)。

再現するHTML

<html>
<head>
</head>
<body>
<div id="flooder" style="overflow:auto; height:4em;">
<div style="position:relative;"><a href="http://yahoo.com/">yahoo yahoo yahoo</a><br /></div>
<div style="position:relative;"><a href="http://yahoo.com/">yahoo yahoo yahoo</a><br /></div>
<div style="position:relative;"><a href="http://yahoo.com/">yahoo yahoo yahoo</a><br /></div>
<div style="position:relative;"><a href="http://yahoo.com/">yahoo yahoo yahoo</a><br /></div>
<div style="position:relative;"><a href="http://yahoo.com/">yahoo yahoo yahoo</a><br /></div>
<div style="position:relative;"><a href="http://yahoo.com/">yahoo yahoo yahoo</a><br /></div>
<div style="position:relative;"><a href="http://yahoo.com/">yahoo yahoo yahoo</a><br /></div>
<div style="position:relative;"><a href="http://yahoo.com/">yahoo yahoo yahoo</a><br /></div>
<div style="position:relative;"><a href="http://yahoo.com/">yahoo yahoo yahoo</a><br /></div>
<div style="position:relative;"><a href="http://yahoo.com/">yahoo yahoo yahoo</a><br /></div>
<div style="position:relative;"><a href="http://yahoo.com/">yahoo yahoo yahoo</a><br /></div>
</div>
<a href="http://google.com/">you cant go to google</a><br />
this is yahooooo
</body>
</html>

http://www.shimobayashi.name/tmp/overflow.html

divを特に操作せずyou cant go to googleとかthis is yahoooooをタップするとYahoo!に遷移してしまう。

普通の人は標準ブラウザなんか使わないから特に問題は無いかも知れないけど、PhoneGapのようにWebViewを利用している場合はこのことが問題になる。

悪名高いAndroid 2系でのposition: fixedとz-index: 1の合わせ技バグを彷彿とさせる。

ググっても同じ症例で悩んでる人見つからなかったので書き残しておく。ちゃんと調査してないので誰かよろしくお願いします。

追記

対処法を教えてもらいました。

<html>
<head>
</head>
<body>
<div style="overflow:hidden;">
<div id="flooder" style="overflow-y:scroll; height:4em;">
<div style="position:relative;"><a href="http://yahoo.com/">yahoo yahoo yahoo</a><br /></div>
<div style="position:relative;"><a href="http://yahoo.com/">yahoo yahoo yahoo</a><br /></div>
<div style="position:relative;"><a href="http://yahoo.com/">yahoo yahoo yahoo</a><br /></div>
<div style="position:relative;"><a href="http://yahoo.com/">yahoo yahoo yahoo</a><br /></div>
<div style="position:relative;"><a href="http://yahoo.com/">yahoo yahoo yahoo</a><br /></div>
<div style="position:relative;"><a href="http://yahoo.com/">yahoo yahoo yahoo</a><br /></div>
<div style="position:relative;"><a href="http://yahoo.com/">yahoo yahoo yahoo</a><br /></div>
<div style="position:relative;"><a href="http://yahoo.com/">yahoo yahoo yahoo</a><br /></div>
<div style="position:relative;"><a href="http://yahoo.com/">yahoo yahoo yahoo</a><br /></div>
<div style="position:relative;"><a href="http://yahoo.com/">yahoo yahoo yahoo</a><br /></div>
<div style="position:relative;"><a href="http://yahoo.com/">yahoo yahoo yahoo</a><br /></div>
</div>
</div>
<a href="http://google.com/">you cant go to google</a><br />
this is yahooooo
</body>
</html>