Почему дрожит содержимое при измении размера окна браузера?

Question

[Простой Человек]

Ссылка на проект
Пруф
Когда меняю размеры окна, то текст в ячейках двигается по высоте, плюс сами ячейки, заголовки и т.д. как-будто дрожат.
Почему и как это исправить?

Comments

[Wispik]

font-size: calc(8px + 10 * (100vw / 1280)) !important;

ну так шрифт зависит от ширины окна, поэтому он и увеличивается

[Простой Человек]

Wispik, ну не всегда от ширины, может и от высоты. Но не суть, дело то не в нём - transition на img мешал.

Answer 1

[Александр Сергеевич]

По сути может быть только один вариант. Если на тексте установлена анимация через transition и из-за изменения экрана срабатывает breakpoint через media запрос для регулировки стилей на разных экранах с уменьшением или увеличением текста, но в данном случае в зависимости от экрана мы немного меняет размер текста "font-size: calc(16px + 6 * (100vw / 1280))" так скажем динамически и это пересчитывается на каждое изменение ширины экрана, почему просто не сделать статические размеры для разных экранов?

Comments

[Простой Человек]

Ну "резина" всегда красивее это делает, в отличие от статики. Имею ввиду переходящий эффект. media считаю полезным в исключительных случаях или например если нужно для смартфона, что в принципе и сделал. Точнее только некоторые правки отдельным файлом, но с media запросом. А в плане динамики некрасиво это делает.

О, спасибо, transition на img мешал. Теперь нормально.
Кстати вернул и от дрожания помогло will-change

opacity: 0.8;
will-change: opacity;
transition: opacity 1s ease-in-out;