`display：-webkit-flex;`在safari浏览器中没有显示/使用样式

Question

我为我的播放器创建一个径向播放按钮我使用css flex来居中播放图标。它在chrome中运行良好，但在safari浏览器中却没有。

在我的CSS中，我有类似的东西：

.inset {
     width: @inset-size;
     height: @inset-size;
     position: absolute;
     margin-left: 20px;
     margin-top: 20px;
     background-color: @circle-background;
     border-radius: 50%;
     border: 3px solid #192D48;
     font-size: 50px;

     display: -webkit-box;
     display: -moz-box;
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;       
     justify-content: space-around;
     -webkit-justify-content: space-around;

     i {
       -webkit-align-self: center;
       align-self: center;
       color: black !important;
       top: 0px;
       left: 1px;
     }
}

我已经添加display: -webkit-flex;来支持safari中的flex，但不幸的是它不起作用，当我在safari的调试器样式中检查它时，它上面没有display: -webkit-flex;但空间-webkit-justify-around出现。

但当我用这样的风格硬编码时：

   <div class='scr-button radial-progress'>
      <div class="circle-gray"></div>
      <div class="circle">
        <div class="circle-white"></div>
        <div class="mask full" ng-style="{'transform': currTime}">
          <div class="fill" ng-style="{'transform': currTime}"></div>
        </div>
        <div class="mask half">
          <div class="fill" ng-style="{'transform': currTime}"></div>
          <div class="fill fix" ng-style="{'transform': currTime * 2}" ></div>
        </div>
      </div>
      <div class="inset" ng-click="play()" style="display: -webkit-flex;">
        <i ng-class="icon()"></i>
      </div>
  </div>

它的工作正常，有人可以解释一下为什么当我把它放在课堂上它不起作用？是浏览器问题吗？或者我做错了？

规格： 减， Safari版本：8.0.8版， Angularjs