iPad blurs page when loading div with audio tag

Question

So I'm having an iPad specific problem in Safari (it also seems to happen sometimes on the iPhone, but either sporadically or it's just not severe enough to notice).

But I have a page with 5 audio players (all html5) and they all start within a div with display: none. Clicking on the title changes the display to be display: block and the player pops up with an unfinished html 5 player. This works everywhere (sans old IE of course) and even works on the iPad.

However, when clicking on the title the entire page gets blurred out on the iPad. I've tried playing with the code and it seems the problem is loading a div from "none" to block" that has an html5 audio file within it. I even changed it so it only displayed the standard controller and I removed all of my extra code and the issue persisted.

Does anyone have any ideas on this?

The link for the website is http://artferretti.com/paulperrysound/recordings/

here's a link to an image from the iPad: http://artferretti.com/blurrediPad.png

Answer 1

I just had a similar issue where my div is all blurred on Ipad when a Vimeo video is inside the div.

I removed the overflow:hidden and it fixed it.

You can check if you have the overflow css rule, could be the key.