При анимации списка сбрасывается background-attachment: fixed, как исправить?

Question

[ettychel]

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

Гуру CSS помогите пожалуйста)



UPD: Также необходимо оставить прозрачность между элементами и чтобы элементы могли иметь полупрозрачность, последнее не обязательно, но первое точно необходимо

Comments

[szQocks]

попробуй не через translate а через left/right/top/bottom анимировать

[ettychel]

szQocks, Не совсем понимаю как это прописать, можешь, пожалуйста дать пример?

[Aetae]

Проще руками анимировать как надо.
Vue из коробки применяет transform, так что если хочется поэксперементировать с альтренативами - сначала стоит добавить transform: none !important;., но это такое себе, либо перейти на установку стилей по событию.

[Александр]

background-size добавьте для начала.

Answer 1

[Сергей delphinpro]

Это вполне ожидаемое поведение. Пофиксить его, вероятно не получится (мне такие методы неизвестны). Остается два варианта.
1. Не использовать трансформации, как предложили в комментариях. Задать position:relative и анимировать свойство top, вместо transform.
2. Указать фон для родителя, а промежутки между сообщениями устанавливать бордером.
Вот так:

Comments

[ettychel]

Блин, решение хорошее, но к сожалению необходимо оставить прозрачность как и под элементом, так и между ними.
Поясню. Это десктоп приложение и окно имеет прозрачность, а также эта же страница используется как виджет для OBS.