HTML5 , iOS7, gray background and height?

Take this site/page for example (not my site, no relation, just an example):

<http://www.htmlgoodies.com/primers/html/article.php/3920991>

See that HTML5 audio player?

Here's what I see via iOS7:

<https://f.cloud.github.com/assets/218624/2095817/874869de-8ef1-11e3-9266-b18e6382e86b.gif>

Things to note:

1. Zooming in/out changes the size of the player skin.
2. The gray background is overlapping surrounding elements (like it's
absolutely positioned).
3. The gray background isn't something that can be easily styled (at
least from my tests).
4. When inspecting the HTML of the mobile Safari page, the UA CSS says
"16px" for height; unfortunately, this value does not match what is
actually displayed on screen (as you can see from my animated gif in
link above).

Question:

How the heck do I make it so that gray background behaves? For the
life of me, I can't seem to find any info on the interwebs about this
"feature" (bug?).

I want to keep that gray box from overlapping it's parent container.
The problem is, I can't seem to figure out what to hook into for
styling as it's not showing as a part of the DOM.

Am I making any sense here?

Any tips would be appreciated.

TIA!