Почему прыгает текст при css transform scale?

Question

[Дмитрий]

Сделал карусельку. При клике по правому/левому блоку меняю класс, css анимацией меняю положение (анимирую left/right) и меняю размер слайда (transform scale).

Код тут
https://jsfiddle.net/fsb2jx43/

Проблема с текстом: при отображении текста на показываемом слайде видно, как он "перестраивается". Проблема в FF, Chrome, Safari, IE.

Пробовал разные варианты: translate3d, backface-visibility, игрался с фиксированным размером блоков с текстом, не помогает.
В чем может быть причина?

Comments

[Александр Лысенко]

Из-за того, что у ваших карточек не задана ширина. Установите, например, min-width: 480px; и баг пропадет.

[Дмитрий]

AlexanderZe: min-width пробую, баг остается.
Если задаю фиксированную ширину, тогда да, пропадает.

Вариант с несколькими значениями фиксированной ширины через media query сработает. Но его хочу оставить, если уж совсем никак по другому не получится.

[Александр Лысенко]

Дмитрий: А у меня пропал

[Дмитрий]

AlexanderZe: на самом деле нет.
Если поставить минимальную ширину в 300px и размер шрифта крупнее (по дизайну текст крупнее чем в примере и блок должен быть не меньше 300), тогда опять скачет.

Кстати, если беру блок и меняю ему те же свойства в developer tools (scale, left/right, zindex, opacity), текст почему-то не скачет.

[Александр Лысенко]

Дмитрий: Да, вы правы. Но тут никак не избежать этого эффекта. Скрытый блок примерно на 25% меньше основного, соответственно текст не может не скакать. Разве что вы зададите его через svg>text но тут придется делать переносы вручную.

[Александр Лысенко]

Дмитрий: Фиксируйте размер блока .text

[Дмитрий]

AlexanderZe: фиксированный размер поставить не могу.
Как уже писал, это я оставил на самый крайний случай.

.os_carousel_item .text{
	width: 270px;
}
@media (min-width: 500px) {
	.os_carousel_item .text{
	    width: 410px;
	}
}

>Скрытый блок примерно на 25% меньше основного
Размер я уменьшаю через transform:scale(), это точно так же уменьшает и размер вложенных элементов.
https://youtu.be/lrdrL8urT6s

[Александр Лысенко]

Размер я уменьшаю через transform:scale(),

Это понятно, но именно это свойство некорректно отрабатывает. В итоге вы получаете на большом тексте скачок 1-2 слов. Даже скорее transition: all 1.0s ease; косячит, так как эффект перехода ложится на него. Такое поведение вполне закономерно.

[Дмитрий]

AlexanderZe: я пробовал цепляться через js на событие окончания анимации. Результат был тот же.

[Дмитрий]

AlexanderZe: я чуть выше прикрепил видео, где я точно такую же трансформацию делаю в браузере. При этом текст не прыгает.
Уверен, причина не в transition и не в transform

[Александр Лысенко]

Дмитрий: Так дело не в самих свойствах, а в том, как они реагируют на условия которые вы задаете. В частности отступы left, right. При анимации их значение меняется, соответственно меняется и ширина блоков установленная как относительная величина. Вот текст и перестраивается.