We are using a web content overlay in a small frame to show a series of social media share buttons. It works beautifully most of the time - when the user taps the img, the in-app browser slides up from the bottom and the share page is ready to go. Sometimes though, for no apparent reason, the share page loads inside our tiny 200x50px frame. Here's a simplified sample of the code from our index.html file that we link to:
<div> <a href="http://www.sharesitegoeshere.com/facebook" target="_blank"><img src="facebook.png" alt="Facebook" width="40" height="40" border="0" /></a></div>
<div> <a href="http://www.sharesitegoeshere.com/twitter" target="_blank"><img src="facebook.png" alt="Facebook" width="40" height="40" border="0" /></a></div>
<div> <a href="http://www.sharesitegoeshere.com/pinterest" target="_blank"><img src="facebook.png" alt="Facebook" width="40" height="40" border="0" /></a></div>
<div> <a href="mailto:?subject=Check%20out%20this%20story%20&body=%0A%0Ahttp%3A%2F%2Fsharesitegoes here.com" target="_blank"><img src="email.png" alt="Email" /></a></div>
Here's some examples of the web overlay opening inside the small frame instead of the browser:
It seems like the first time we try the share button from a new article, it loads in the frame instead of the in-app browser, but every time after it behaves correctly. Is there any way to prevent this?