Исправление проблемы CLS для элемента нижнего колонтитула ⇐ CSS

[Anonymous]

Я заметил проблему CLS на вкладке Vercel Speed ​​Insights на моем веб -сайте пару дней назад, и сегодня утром я решил выяснить, что вызывает эту проблему. Я заметил, что меньший размер экрана составляет, более высокий балл (> 0,20) я получаю, и он всегда указывает на элемент нижнего колонни. Интересный факт: элемент нижнего колонтитула не вызывает проблемы CLS (оценка «хорошая») на домашней странице, но только на конкретных. Я полагаю, что это может произойти, потому что страницы, на которые я имею в виду, имеет динамический контент, который загружается из DB. < /P>
Я много читал о CLS и потенциальных решениях, но просто сохраняя некоторое пространство для самого нижнего колонтитула и подразделения, такие как «навигации» и «BottomContainer» не решайте проблему! 4.0 Сонет, O3) Но все они не прошли успехи, задавая подробные конкретные вопросы для анализа 2 файлов .tsx и .scss > определить точки, которые могут это вызвать. нижний колонтитул: < /p>

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

.container {
display: flex;
flex-direction: column;
background-color: rgb(230, 230, 230);
border-radius: var(--border-radius-sm);
contain: layout style;
overflow: hidden;
}

.navigationSections {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
gap: 4rem;
min-height: 120px;
padding: var(--padding-md);
}

.bottomContainer {
display: flex;
flex-direction: row;
padding: var(--padding-sm);
background-color: rgb(210, 210, 210);
}

.infoContainer {
display: flex;
width: fit-content;
height: fit-content;
flex-direction: row;
font-weight: var(--font-weight-med);
font-size: var(--font-size-body-3);
white-space: nowrap;
}
.socialMediaLinks {
display: flex;
width: fit-content;
justify-content: end;
flex-direction: row;
gap: 1rem;
}

.socialMediaIcon {
width: 40px;
height: 40px;
display: block;
flex-shrink: 0;
}

@media (max-width: 767px) {
.container {
padding: var(--padding-sm);
gap: .5rem;
height: fit-content;
}

.navigationSections {
height: fit-content;
flex-direction: column;
gap: .5rem;
padding: var(--padding-sm);
}

.navigationSection {
width: 100%;
}

.sectionElements {
width: 100%;
}

.bottomContainer {
flex-direction: column;
gap: .5rem;
}

.infoContainer {
white-space: normal;
}
}

Подробнее здесь: https://stackoverflow.com/questions/796 ... er-element