Элементы DOM правильно инициализированы, но не видны после преобразования слайдера ⇐ Html

[Anonymous]

I am dynamically adding DOM elements during initialization using JavaScript.
All the elements are correctly added to the DOM (see developer tools screenshot — all tags are inside the container).
However, when I slide to the next page using transform: translateX(), the elements are not visible, even though they are definitely in the DOM and have correct size (see the second Скриншот). < /p>
Что может вызвать эту проблему? (data-page = "0") отображается совершенно нормально. < /p>
Это не дисплей CSS: нет проблемы. < /p>
Это не проблема непрозрачно рендеринг изображений при скольжении. < /p>

Код: Выделить всё

const pages = [{
prefix: 'assets/emoji_',
count: 18
},
{
prefix: 'assets/effect_',
count: 18
}
];

function initializePages() {
const grids = document.querySelectorAll('.page-grid');
grids.forEach((grid, index) => {
const page = pages[index];
for (let i = 1; i 
.page-slider {
display: flex;
width: 100%;
overflow: hidden;
transition: transform 0.4s ease;
}

.page-grid {
min-width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
}< /code>

page 0 (data-page = "0")-изображения видимыми


Подробнее здесь: https://stackoverflow.com/questions/795 ... -transform