此 CSS 动画 (.less) 在 Firefox 和 Chrome 中有效，在 Safari 中无效

Question

我的 web 应用中有这个小 CSS3 动画，它是屏幕左下方的一个面板。我使用 Linux，因此无法在 Safari 中试用动画，但是我的项目负责人当然是 Mac 用户，他立即抱怨它不起作用。

所以，这是我的两个文件。我将在这里粘贴我正在处理的所有内容，在底部我有一个 jsfiddle，它试图用纯 css 和更少的 HTML 标记来重现它。 :)

这是 less 文件。

.panel {
  position:absolute;
  left:20px;
  bottom:20px;
  background-image : url("./images/filter_bg.png");
  width:476px;
  height:126px;
  z-index:1;
  cursor:pointer;
}

.filter {
  position:relative;
  float:left;
  z-index: 2;
  width:119px;
  height:119px;
  vertical-align:24px;
  overflow:hidden;
  &.activeLive {
    background-image: url("./images/filter_active1.png");
  }
  &.activeSee {
    background-image: url("./images/filter_active2.png");
  }
  &.activeEat {
    background-image: url("./images/filter_active3.png");
  }
  &.activeDo {
    background-image: url("./images/filter_active4.png");
  }
}

.filter:hover > .filter-hover {
  position:absolute;
  height:34px;
  width:119px;
  -moz-transition:-moz-transform 180ms;
  -webkit-transition:-webkit-transform 180ms;
  -o-transition:-o-transform 180ms;
  transition:transform 180ms;
  background-image:url("./images/filter_hoverlabel_bg.png");

}
.filter:hover > .filter-hover {
  transform: translate(0,-24px);
}

.filter-hover{
  position: relative;
  bottom:-26px;
  text-align:center;
  line-height: 32px;
}
.filter-icon{
  width:68px;
  height:68px;
  margin: 24px auto auto;
  &.inactive1{
    background-image:url("./images/filter_icon1_inactive.png");
  }
  &.inactive2{
    background-image:url("./images/filter_icon2_inactive.png");
  }
  &.inactive3{
    background-image:url("./images/filter_icon3_inactive.png");
  }
  &.inactive4{
    background-image:url("./images/filter_icon4_inactive.png");
  }
  &.active1{
    background-image:url("./images/filter_icon1_active.png");
  }
  &.active2{
    background-image:url("./images/filter_icon2_active.png");
  }
  &.active3{
    background-image:url("./images/filter_icon3_active.png");
  }
  &.active4{
    background-image:url("./images/filter_icon4_active.png");
  }
}
.filter-text{
  text-align:center;
}

点击时它会向 div 添加一个类，我为此使用 angular。所以不要太在意。

<div class="panel" ng-controller="PanelCtrl">
            <div class="{{liveEnabled ? 'filter activeLive' : 'filter'}}" ng-click="liveButton()">
                <div class="{{liveEnabled ? 'filter-icon active1' : 'filter-icon inactive1'}}"></div>
                <div class="filter-hover">
                    Bo
                </div>
            </div>
            <div class="{{seeEnabled ? 'filter activeSee' : 'filter'}}" ng-click="seeButton()">
                <div class="{{seeEnabled ? 'filter-icon active2' : 'filter-icon inactive2'}}"></div>
                <div class="filter-hover">
                    <span class="filter-text">Se</span>
                </div>
            </div>
            <div class="{{eatEnabled ? 'filter activeEat' : 'filter'}}" ng-click="eatButton()">
                <div class="{{eatEnabled ? 'filter-icon active3' : 'filter-icon inactive3'}}"></div>
                <div class="filter-hover">
                    <span class="filter-text">Äta</span>
                </div>
            </div>
            <div class="{{doEnabled ? 'filter activeDo' : 'filter'}}" ng-click="doButton()">
                <div class="{{doEnabled ? 'filter-icon active4' : 'filter-icon inactive4'}}"></div>
                <div class="filter-hover">
                    <span class="filter-text">Göra</span>
                </div>
            </div>
        </div>

我做了这个小提琴：http://jsfiddle.net/j97ahnkv/ 它试图展示我想要做什么。

Answer 1

它在 Safari 中不起作用，因为它仍然在 requires the -webkit prefix 上 transform。

您必须将其添加到此规则中：

.filter:hover > .filter-hover {
   -webkit-transform: translate(0, -24px);
    transform: translate(0,-24px);
}