Блог

Главная - Вопросы по программированию - Проблемы с анимацией в Firefox

Проблемы с анимацией в Firefox

#html #jquery #css

#HTML #jquery #css

Вопрос:

Есть простая анимация https://ektx.000webhostapp.com/firefox-animation /. Все отлично работает во всех браузерах, но в Firefox при указании на серое поле кружок дергается. Кто-нибудь может сказать мне, как это исправить, чтобы анимация была плавной и в Firefox тоже.

 $('#section').on('mousemove', function(e) {
   let y = e.pageY - $(this).offset().top - ($(this).height()/2);
   let x = e.pageX - $(this).offset().left - ($(this).width()/2);
   x = x * 0.1; y = y * 0.1;
   $('.circle').css({ 'transform': 'translate( '  x   'px, '   y   'px)' });
}); 
 .section {
  width: 100%;
  height: 100vh;
  background-color: #ebebeb;
  z-index: 1;
}

.circle {
  position: absolute;
  left: 45%;
  top: 50%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #2a3138;
  transition: 1.5s ease-out all;
}

.field {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 100px;
  height: 100px;
  width: 70%;
  background-color: #7d7f89;
}

.line {
  position: relative;
  top: -5px;
  display: inline-block;
  width: 0;
  height: 10px;
  background-color: #2a3138;
  transition: 1.5s ease-out all;
}

.field:hover .line {
  width: 300px;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section" id="section">
  <div class="circle"></div>
    <div class="field">
      <span class="line"></span>
    </div>
</div>

Комментарии:

1. Вы пробовали использовать эти (-webkit-transition, -moz-transition, -o-transition) свойства css?

2. Да, но это не помогает.

3. вы проверили, поддерживаются ли эти функции в используемой вами версии Firefox?

4. Сам код работает нормально, проблемы возникают только при указании на серое поле ‘.field’, цифра дергается.

5. Если убрать переход из ‘.line’, то все нормально. Или, если ‘.line’ не изменяет размер, но цвет, например, но переход оставить, также работает. Но необходимо, чтобы размер «.line» плавно менялся, а круг плавно перемещался.