По завершении перехода текст перестраивается?

Question

[Zuckerberg]

Третий день пытаюсь постичь превратности переходов, но одно накладывается на другое, поэтому прошу помощи здесь, у более опытных людей.. кто то уже видел мои вопросы до этого, но всё же прошу помочь разобраться.

Собственно здесь исходник верстки: https://yadi.sk/d/7u_zfAVIUqazwQ

При наведении, по завершении перехода - верхний текст как будто бы меняет своё положение или наоборот восстанавливается, но выглядит как смещение ... это особо заметно, если уменьшать ширину окна браузера и выглядит это не очень.

Для наглядности сделал запись gif (лучше открыть целиком, или посмотреть саму верстку)

В интернете не так много про это пишут ... Думал что нашел решение backface-visibility: hidden , но текст в опере становиться размытым, да и в хороме если изменять ширину окна.

Посоветуйте, как быть? Не хотелось бы так оставлять.

Comments

[Rustam Bainazarov]

Если вы о лёгкой ряби теста во время transition — это особенности рендеринга переходов трансформаций. Ничего не сделаете вы с этим.

То же самый эффект есть, кстати, в Windows 10 у кнопок в панели управления, которые при зажатии уменьшаются. Хоть там и не CSS, нам тоже текст немного скачет во время процесса уменьшения/увеличения, а по завершению анимации как бы восстанавливает положение м чёткость. Субпиксели и всё такое прочее.

[Zuckerberg]

Рустам Байназаров, да уж, не совсем приятный эффект, и ведет себя на разных разрешениях по разному, где то вобще не скачет, где то заметно сильно. Правда, я не сталкивался ещё с такими эффектами и не знаю пока, до какого разрешения должен быть эффект наведения, ведь по сути, потом идут тачпады, а там даже не знаю что с этим делать.

[strelok011]

Классу .works-item__inner добавьте transform: translate3d( 0, 0, 0);

[strelok011]

Да, по поводу тачпадов - через медиа-запросы запрещайте обработку ховеров (они будут срабатывать на тач) и opacity ставьте сразу 1.

[Zuckerberg]

strelok011,

Классу .works-item__inner добавьте transform: translate3d( 0, 0, 0);

Спасибо, это действительно решает проблему частично, но если поиграть шириной окна, то текст в некоторые моменты всё равно размывает. Такой эффект наблюдается конкретно у transform: scale( ), видимо всё что связано с масштабирование дает такой отрицательный момент. Что интересно, если текст в одну строку, то это почти и незаметно, но если несколько строк, то пляшет. Вообще я придумал как можно реализовать без искажений, но получится громоздко - можно обернуть всё это, текст вынести отдельным блоком с абсолютным позиционированием, и отдельно блок который будет масштабироваться и одновременно появляться блок с текстом )) такой "финт ушами".

[strelok011]

Zuckerberg проблема собственно в том, что для трансформации хромовые движки запускают свой механизм сглаживания шрифтов. Эффект translate3d просто сразу включает этот эффект, потому не так сильно дергается изображение.
Альтернатива - попробовать использовать текст, завернутый в svg, но скорее всего это будет равнозначно использованию translate3d.
Так что да - лучше конечно разнести и не использовать анимацию размера или масштабирования шрифта.

[Zuckerberg]

Рустам Байназаров, извиняюсь, вопрос немного не по теме, но раз уж вы видели здесь верстку. Я пробую верстать в rem'ах. Я так понял, что эта единица сделана для универсальности. Сверстал значит, потом начал уменьшать значение html под мобильный, а так как у меня заголовки и отступы у секции намного больше размера шрифта параграфов и другого текста, то этот текст в итоге получился мизерным. Получается надо опять переопределять значения. В чем соль тогда этих рэм не могу понять? Что в рэмах, что в пикселях идет переопределение.
Но мне пришла в голову мысль - грамотно ли будет большие значения делать в рэмах, а всё остальное в пикселях?

[Rustam Bainazarov]

Zuckerberg, если честно, я не смотрел вёрстку, как и многие другие люди, я не стал качать архив, чтобы это сделать. Я просто почитал описание и понял, о чём вы.

Поэтому не смогу подсказать, где с rem/em накосячили.

[Zuckerberg]

Рустам Байназаров, я просто хотел узнать можно ли такой подход использовать? Можно даже не смотреть, заголовок 4.5rem(45px), а параграф 1.8rem(18px) ... соответственно чтобы заголовок смотрелся уменьшаю значение html, в след за ним уменьшается и параграф сильно.