Flash Not Working Properly With Transform:Translate Property - html

Question

I was trying to figure out how to center my CSS transition animation with width only; which was solved.
The music player that I am using is acting strangely with the tranform:translate property. Before I implemented the transform:translate property, the music player worked correctly.
Problem : But when I started using it I couldn't click any of the buttons unless I either spammed them or right clicked into a menu then left clicked them; which you can see here : GIF example.
You can view this issue in action at : this demo page.
This is my code (used at demo page) :
CSS code :
body {
background-color: black;
}
#music {
position: absolute;
top: 140px;
left: 155px;
width: 50px;
height: 50px;
border: 1px solid white;
background-color: #000;
opacity: 1;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
transition: all 0.8s ease;
}
#music:hover {
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
#music img {
height: 30px;
width: 30px;
margin-top: 10px;
}
#music:hover .music-container {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
height: 23px;
width: 210px;
margin-top: 8px;
opacity: 1;
background-color: #000;
color: #000;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
transition: all 0.8s ease;
}
.music-container {
height: 23px;
width: 0px;
position: absolute;
background-color: #000;
border: 1px solid white;
margin-top: 8px;
overflow: hidden;
opacity: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
left: 50%;
transform: translate(-50%, 0);
}
HTML code :
<div id="music">
<center>
<img src="https://i.imgur.com/cgIfJId.gif" />
</center>
<div class="music-container">
<center>
<font size="1" color="white">
Music Player not supported. See link in SO to view.
</font>
</center>
</div>
</div>