-webkit-transform:无效果，背景变白

Question

我使用jQuery创建了一个span。创建后，必须在短时间内缩放span。我使用CSS类来达到预期的效果。它可以在Firefox和Opera中运行，但不能在webkit浏览器中运行。为什么？

下面是一个测试用例：

​

var i = 0;

$(".link").click(function() {
  i++;

  $("#boxes").append("<span class='box' id='" + i + "'>Test</span>");
  $(".box").fadeIn(500);

  setTimeout(function() {
    $(".box[id = " + i + "]").addClass("zoom");
  }, 500);

  setTimeout(function() {
    $(".box[id = " + i + "]").removeClass("zoom");
  }, 900);
})

a {
  display: block;
  height: 40px;
}

body {
  background-color: grey;
}

.box {
  background-color: #f0f0f0;
  padding: 10px;
  margin: 10px;
  cursor: pointer;
  display: none;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
}

.zoom {
  -moz-transform: scale(1.6);
  -webkit-transform: scale(1.6);
  -o-transform: scale(1.6);
  -ms-transform: scale(1.6);
  transform: scale(1.6);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="link">Add box</a>

<div id="boxes"></div>

​

在webkit浏览器中，我的背景图像(没有出现在小提琴中)消失了一秒钟，然后又回来了--没有缩放，什么都没有。正如您所看到的，我使用了-webkit-transform，所以一定有另一个原因。

Answer 1

**

• 选项1

**看看这个。http://jsfiddle.net/Udhby/4/注意到css的变化。因为您插入的span是一个内联元素，所以转换属性在webkit中以某种方式不起作用。因此，尝试将display:inline-block添加到缩放类中

**

• 选项2

**

使用div而不是span。检查此http://jsfiddle.net/Udhby/5/