Почему мой recsectionObserver слишком часто запускается в контейнере 3D -преобразования, но не в контейнере 2D преобразо ⇐ Javascript

[Anonymous]

Я играю с recsectionobserver в двух разных контейнерах прокрутки: один использует 3D -преобразование, а другой использует более простое 2D -преобразование.
Для 3D Контейнер, обратный вызов наблюдателя постоянно стреляет во время прокрутки, даже когда красная коробка остается полностью видимой. Между тем, в 2D -контейнере он ведет себя так, как я ожидал - только увольнение заметно при входе или выходе из части просмотра. < /P>
ниже мой минимальный пример. Если вы откроете его и прокрутите каждый контейнер отдельно, вы увидите, как 3D -журналы контейнеров часто изменяются небольшие изменения, тогда как 2D -контейнер регистрируется меньше. Это нормально с 3D -преобразованием? Или я неправильно использую recsectionobserver ? /p>






IntersectionObserver 3D vs 2D Transform

.compare-section {
display: flex;
gap: 20px;
margin-bottom: 20px;
}
.container {
width: 300px;
height: 200px;
border: 2px solid #333;
overflow-y: scroll;
position: relative;
}
.content {
height: 600px;
background: linear-gradient(to bottom, #eee, #ddd);
}

/* 3D container with perspective */
.transform-container-3d {
perspective: 500px;
}
.content3d {
transform: rotateX(15deg);
transform-origin: top center;
}

/* 2D container with a simple rotation */
.transform-container-2d .content2d {
transform: rotate(5deg);
transform-origin: top center;
}

.target-box {
width: 100px;
height: 100px;
margin: 50px auto;
background-color: red;
}

.logs {
font-family: monospace;
white-space: pre;
border: 1px solid #ccc;
padding: 10px;
height: 150px;
width: 270px;
overflow: auto;
}

h2 {
margin: 0 0 10px;
}



IntersectionObserver 3D vs 2D Transform Test



3D Container





2D Container






3D Logs:
2D Logs:



const target3d = document.getElementById('target3d');
const log3d = document.getElementById('log3d');
const target2d = document.getElementById('target2d');
const log2d = document.getElementById('log2d');

const observer3d = new IntersectionObserver((entries) => {
entries.forEach(entry => {
log3d.textContent += `ratio: ${entry.intersectionRatio.toFixed(2)}\n`;
});
}, {
root: document.querySelector('.transform-container-3d'),
threshold: [0, 0.25, 0.5, 0.75, 1]
});

const observer2d = new IntersectionObserver((entries) => {
entries.forEach(entry => {
log2d.textContent += `ratio: ${entry.intersectionRatio.toFixed(2)}\n`;
});
}, {
root: document.querySelector('.transform-container-2d'),
threshold: [0, 0.25, 0.5, 0.75, 1]
});

observer3d.observe(target3d);
observer2d.observe(target2d);


< /code>
< /div>
< /div>
< /p>
Мои вопросы: < /p>

• < Br />
• Приводят ли перспектива или 3D -преобразования крошечные сдвиги макета, которые делают пересечение recsectionobserver < /code> чаще? < /li>
  Есть ли известный обход Преобразование?

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