serge/site-mva-global-fret
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(js): IntersectionObserver threshold 0.1 \xe2\x86\x92 0 for animate-on-scroll

Browse Source 
Bug: on mobile portrait, content of cgv.html and
politique-confidentialite.html stays invisible because the
.animate-on-scroll blocks (data-lang-block FR/EN/MG trilingual
content) are 2000-3000px tall and the viewport (~600px) never
reaches the 10% intersection ratio required to trigger the
.visible class.

Symptom: page appears empty on mobile until user resizes the
window (= triggers re-evaluation). Reported by Serge during
post-cutover E2E retest 2026-05-07.

Other pages (mentions-legales, accueil, etc.) unaffected because
their .animate-on-scroll blocks are short enough to satisfy the
previous 10% threshold.

Fix: threshold: 0 fires as soon as any pixel of the element
enters the viewport. rootMargin -50px bottom kept to give a small
buffer before triggering animation.

Refs: post-cutover polish (companion to PR #6 chore polish).
This commit is contained in:
Serge RAKOTO HARRY-NAIVO 2026-05-07 15:37:33 +02:00
parent 5b84e5697e
commit e30704e6ef
1 changed files with 6 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
js/main.js
View File

@ -118,7 +118,12 @@ function setupAnimations() {
observer.unobserve(entry.target); observer.unobserve(entry.target);
} }
}); });
}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }); // threshold: 0 (= fire dès qu'1px du bloc entre dans le viewport).
// Avant : threshold 0.1 (= 10%) ne fire jamais sur mobile portrait pour
// les pages cgv.html + politique-confidentialite.html dont les blocs
// .animate-on-scroll font 2000-3000px de hauteur (contenu trilingue
// FR/EN/MG verbose) — la viewport mobile ~600px n'atteint jamais 10%.
}, { threshold: 0, rootMargin: '0px 0px -50px 0px' });
elements.forEach(el => observer.observe(el)); elements.forEach(el => observer.observe(el));
} }