mobile safari renders white space for html audio tag
Unlike desktop browsers, mobile Safari adds white space for the audio tag when it renders html in the iPhone and iPad. Why is this? Is there a way to avoid the behavior without an unnecessary style setting?
My goal is to allow a site visitor to play a short audio excerpt. Introductory text and play / pause buttons must display on one line with single spacing between elements. The code works fine in desktop browsers, but Mobile Safari (tested on iPhone 4S and iPad 3) adds white space (equivalent to ~30 characters) where the audio tag appears in the html file.
I isolated the problem, and found a workaround. Here is a description of the situation, and three test pages that take you through the progression. The last test file gives the workaround. View each file in a desktop browser and an iPhone/iPad to see the behavior (and the source code).
Space appears between introductory text and buttons - audiotest3
Move audio tag before the text and buttons, which makes a new line - audiotest4
Style the container that holds text and buttons with a negative top margin - audiotest5
ANSWER: Change audio style to height: 0 and width: 0 - audiotest6
Click here for the test files.
Is this a known bug, or should I use a different markup?
Different markup it is. See ANSWER above.
So I found your question while searching for a solution to a similar problem I was having with my website on my iPad. After doing some debugging work with my CSS, I found that if you use custom controls to play/pause the sound, the audio element will still have a default height of 30px and a width of 200 or 300px. You can see this in Chrome's dev tools.
The issue I was having only occurred on my iPad and was adding a huge space in between the text I was using for play/pause buttons.
Set the audio tag dimensions to 0 and that should take care of your problem.
audio {
height:0;
width:0;
}