Здравствуйте!
В настоящее время мое приложение имеет большой длинный список горизонтальных гистограмм. у этих диаграмм есть столбцы с background-image из linear-gradient с, и когда эти компоненты монтируются, они анимируются слева направо, используя keyframes до translateX соответственно.
Поскольку мой список очень длинный, многие графики находятся ниже сгиба при загрузке. пользователь имеет возможность показывать и скрывать графики с помощью действия щелчка.
Моя проблема заключается в следующем: Если пользователь скрывает несколько верхних диаграмм, тем самым перенося нижние диаграммы над сгибом, фоновое изображение нижних диаграмм не отображается или, по крайней мере, не появляется при осмотре элемента все выглядит полностью кошерным, за исключением того, что фоновое изображение не появляется, пока пользователь не прокрутит, не изменит ширину экрана или не предпримет какое-либо действие, чтобы вызвать рендер через реакцию.
Вот кодовая ручка, описывающая немного поведения и показывающая анимацию, которую я использую в файле CSS, но я не могу в течение жизни воспроизвести это поведение: https://codepen.io/stopitdan/pen/oNXajZG
Я на Chrome Версия 80.0.3987.149
Это не происходит по крайней мере в Safari 13.0.3
Также прилагается набор из двух фотографий, одна из которых скрыта за верхними частями, и на первой фотографии одно из фоновых изображений фактически даже разрезано пополам там, где была складка, а вторая фотография после прокрутил пару пикселей, чтобы он обновился 
после прокрутки: 