Safari Bug с переходом и Transtatey: «прыжки» элемент ⇐ CSS

[Anonymous]

Я перемещаю элемент с Transtatey. Все работает нормально под Chrome, Firefox, т. Е., Старый Edge , кроме Safari (версии 12, 13, 14 ..., 18) и Gnome Web (webkit).
под сафари элемент "прыжки". Здесь небольшой пример (также доступен на Codepen): < /p>

Код: Выделить всё

.parent {
height: 50px;
background-color: blue;
padding: 10px;
}

.child {
background-color: yellow;
padding: 10px;

transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.child.move {
transform: translateY(-150%);
padding: 0; /* If 10px: no bug */
}< /code>



Click me

Я не смог найти ответы на трекере ошибок Webkit.
Знаете ли вы некоторые обходные пути? Br /> [*] CSS Transform + Width + левый + прыжок с верхним переходом в браузере Safari < /li>
Переход как преобразование, так и размер в Safari (9.1) < /li>
Анимирующая поля и прокладка с помощью CSS Transition вызывает прыжковую анимацию


Подробнее здесь: https://stackoverflow.com/questions/579 ... ng-element