Le 6 févr. 2014 à 14:51, Micky Hulse <[email protected]> a écrit :
> 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> Right, that example only links to a .ogg file, which neither desktop nor mobile Safari can play. The grey bar you see are the default browser controls, given the 'controls' attribute on the audio element. As it can't play the soundtrack, it shows a message, though. > Things to note: > > 1. Zooming in/out changes the size of the player skin. As expected. > 2. The gray background is overlapping surrounding elements (like it's > absolutely positioned). Not really, but yeah, the browser controls in mobile Safari are taller than 16px, to allow for fatty fingers to interact with said controls. audio { width: 200px; height: 40px; } should give you a start, adjust to taste. > 3. The gray background isn't something that can be easily styled (at > least from my tests). Indeed it is not possible to style the default browser controls, but you can omit the attribute and build your own… (js required, see below for some links) > 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). See above under your point 2] > 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?). Just allow for enough space for the element… https://duckduckgo.com/?q=Safari+styling+the+audio+element which brings you to the apple developer docs, but also http://stackoverflow.com/questions/4126708/is-it-possible-to-style-html5-audio-tag There are a bazillion other stackoverflow links on the intertubes. > 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. Shadow DOM, but that is a whole other bag of madness (and a future one only) > Am I making any sense here? Dunno, I think my cat made a mess of it :-). Philippe -- Philippe Wittenbergh http://l-c-n.com ______________________________________________________________________ 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/
