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! -- <git.io/micky> ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
