Images disappear when you click on iPhone Safari

Question

Ok, weird problem:

1) Go here on the iPhone (Safari browser): http://powellcreative.com/our-team/

2) Click on any team picture to go to the team member page.

3) Click the back button in the browser

4) The image has disappeared on the Teams page now

Answer 1

I know this question is old, but I was looking for a solution to a similar problem, and after searching I found a solution. Hope this helps other people with the same problem. The problem is that you are giving iOS a javascript event, such as onmouseover or onmouseout, it doesn’t like it, mainly because when your finger "iterates over" an element in iOS, you actually click on it, so this is the solution. which I came in that seems to reload images after clicking the back button in iOS.

Here he is:

Make sure all images are in a separate div with a distinguished name. Example:

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

In the javascript header part of your page, you want to insert this:

 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>'; } } 

This will check the page as Mobile Safari uses bfcache and reloads your image in a div. Hope this helps the OP or someone else.