Когда два элемента используют преобразование для перемещения одновременно, почему в середине есть промежуток?

Question

Вот мое демо ошибки: https://jsbin.com/gijabuseca/edit?html, css, js, вывод

ошибка img

Это ошибка браузера?

Я решил эту проблему, заменив transform: translateX (100%) на left: 100%

Однако, использование left для изменения положения намного ниже, чем transform. Если настаиваете на использовании преобразования, есть ли способ решить эту проблему?

Answer 1

Взлом вокруг этой ошибки может немного изменить движение div 1.

Смещение небольшого бита в функции синхронизации от значения стандартного easy , мы подгоняем его ближе к div2.

Я установил переход медленнее, чтобы было легче увидеть, если он потерпит неудачу

setTimeout(function(){
  document.querySelector('.demo1').classList.add('right'); 
  document.querySelector('.demo2').classList.add('right');
});

body {
  background: green;
}

.wrapper {
  position: relative;
  width: 100px;
}

.demo1, .demo2 {
  position: absolute;
  width: 100%;
  height: 100px;
  background: #ddd;
  transition: 4s;
}

.demo1 {
  transform: translateX(0);
  transition-timing-function: cubic-bezier(.23, 0.12, .25, 1.05);
}
 
.demo2 {
  transform: translateX(100%);
 }

.demo1.right {
  transform: translateX(100%)
 }

.demo2.right {
  transform: translateX(200%);
}

<div class="wrapper">
  <div class="demo1"></div>
  <div class="demo2"></div>
</div>