JQuery боковая навигация не гладкая на мобильных устройствах

Question

У меня проблема с боковой навигацией, которую я сделал с Jquery, она отлично работает на ноутбуке или настольном компьютере, но на мобильном устройстве переход не гладкий, как на настольных компьютерах или ноутбуках. Я не знаю, в чем причина проблемы

если вам интересно, я сделал боковую навигацию, переключив класс, который занимает позицию боковой навигации слева: -30%; до 30%

Answer 1

Я действительно хотел показать вам разницу в производительности.Посмотри мое демо.Нажмите на поле, чтобы увидеть его движение.Даже на моем новом MacBook Air я вижу разницу.На мобильном телефоне, как вы заметили, разница гораздо более выражена.

$(".box").on("click", function() {
  $(this).addClass("start");
})

$(".reset").on("click", function() {
  $(".box").removeClass("start");
})

@keyframes moveWithLeft {
  from {
    left: 0; 
  }
  to {
    left: calc(100vw - var(--box-width));
  }
}

@keyframes moveWithTransform {
  to {
    transform: translate(calc(100vw - var(--box-width)));
  }
}

.box {
  --box-width: 80px;
  --box-height: 70px;  
  width: var(--box-width);
  height: var(--box-height);
  line-height: var(--box-height);  
  background-color: rgba(0, 128, 0, 1);
  position: absolute;
  color: white;
  display: inline-block;
  cursor: pointer;
  font-family: helvetica;
  transition: 0.3s background-color ease-in-out;
}

.box:hover {
  background-color: rgba(0, 128, 0, .8);
}

.box span {
  text-align: center;
  display:  block;
  font-size: 85%;
}

.box.two {
  top: calc(var(--box-height) + 5px);
}

.one.start {
  animation: 3s moveWithLeft forwards; 
}

.two.start {
  animation: 3s moveWithTransform forwards; 
}

button {
  position: fixed;
  bottom: 0;
  left: 0;
  font-size: 1.2rem;
  font-family: helvetica;
  padding: 10px;
  border: none;
}


html, body {
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box one"><span>Left</span></div>
<div class="box two"><span>Transform</span></div>

<button class="reset">Reset</button>

jsFiddle

Answer 2

.parentDiv {
  transition: 300ms all;
}