Flash无法正常使用转换：转换属性

Question

我试图找出如何将CSS过渡动画仅以宽度为中心; which was solved。

我正在使用的music player与tranform:translate属性行为奇怪。在我实现transform:translate属性之前，音乐播放器工作正常。

问题：但是当我开始使用它时我无法点击任何按钮，除非我发送垃圾邮件或右键单击菜单然后单击鼠标左键他们;你可以在这里看到：GIF example。

您可以在以下位置查看此问题：this demo page。

这是我的代码（在演示页面使用）：

CSS 代码：

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 代码：

    <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>