-webkit-transform: без эффекта и фон становится белым

Question

Я создал span, используя jQuery. После создания span необходимо увеличить на короткое время. Я использую классы CSS для достижения желаемого эффекта. Он работает в Firefox и Opera, но не в веб-браузерах. Почему?

Вот тестовый пример:

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, который является встроенным элементом, свойство transform в webkit не работает. Поэтому попробуйте добавить display: inline-block в класс увеличения

**

• Вариант 2

**

Вместо использования пролетов используйте div. Проверьте это http://jsfiddle.net/Udhby/5/