iphone - iPhone Safariでクリックすると画像が消える

Question

わかりました、奇妙な問題:

1) iPhone (Safari ブラウザー) でここに移動: http://powellcreative.com/our-team/

2) チームの画像のいずれかをクリックして、チーム メンバーのページに移動します。

3) ブラウザの戻るボタンをクリックする

4) チームページの画像が消えました

Answer 1

この質問はちょっと古いことは知っていますが、同様の問題の解決策を探していて、検索したところ解決策が見つかりました。うまくいけば、これは同じ問題を抱えている他の人々に役立ちます。問題は、iOS に onmouseover や onmouseout などの JavaScript イベントを与えると、それが気に入らないことです。これは主に、指が iOS の要素を「マウスオーバー」しているときに、実際にそれをクリックしているためです。これが解決策です。 iOSで戻るボタンを押した後、画像をリロードするようです。

ここにあります：

すべての画像が、固有の名前を持つ独自の個別の div にあることを確認してください。例：

<div name="div1"><a href="dosomething"><img src="yourimage" onmouseover="javascript:this.src='yourimage2';" onmouseout="javascript:this.src='yourimage';"></a></div> 

ページの JavaScript の head 部分に、次のように挿入します。

window.onpageshow = 
function(event){
if (event.persisted){
//for every div and image you want changed back you can add a loop here to change all at once or just one div by name//
document.getElementById('div1').innerHTML = '<a href="dosomething"><img src="yourimage" onmouseover="this.src="yourimage2";" onmouseout="this.src="yourimage";"></a>';
}
}

Mobile Safari は bfcache を使用し、画像を div にリロードするため、これはページ バックをチェックします。うまくいけば、これはOPまたは他の誰かに役立ちます。