overflowではみ出た要素がクリッカブルになってしまうAndroid 4標準ブラウザのバグ

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: fixedz-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>

みたいな感じでoverflow: hiddenなdivで囲むと期待した挙動になる。

id:hitode909 最高!!!!!!!