This is more of a bandaid, but it’ll work for my project. I noticed this behavior seems to be related to the duration of my podcast exceeding an hour – and seems to be isolated to just mobile browsers. So, what I did was just hide the overflow (which may not work for everyone):
/* MediaElement */
.mejs-container[style] {
overflow: hidden !important;
}
The duration just isn’t shown for that podcast, not ideal, but it works. The main thing is the audio file plays without the funky behavior…the play/pause still works…and all of the audio files that have a duration under an hour display the duration just fine and work without issue.
For me this works because it really doesn’t disrupt the user experience. I would prefer the duration to be shown, but that’s not a deal breaker because there is a progress bar so the user can still gauge how much time is left for a given podcast.
Unfortunately, in this situation (besides switching audio players), this is a pretty good solution and will work for me. Most users probably won’t even notice and having a podcast over an hour is not the norm for this site, so having it work this way is a great solution.
Thanks,
Josh