From defc44df990cf0e89ef3acefb91b0569ee38bcc0 Mon Sep 17 00:00:00 2001
From: Dominik Polakovics <dominik.polakovics@cloonar.com>
Date: Fri, 20 Dec 2024 17:24:16 +0100
Subject: [PATCH] fix: fade-in for large elements

---
 packages/base/Resources/Public/JavaScript/fade-in.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/base/Resources/Public/JavaScript/fade-in.js b/packages/base/Resources/Public/JavaScript/fade-in.js
index 1ac9b67..7e4eb95 100644
--- a/packages/base/Resources/Public/JavaScript/fade-in.js
+++ b/packages/base/Resources/Public/JavaScript/fade-in.js
@@ -5,6 +5,7 @@
 
     // If IntersectionObserver is supported, use it for better performance
     if ('IntersectionObserver' in window) {
+      // Adjusted options to help large elements fade in
       var observer = new IntersectionObserver(function(entries, observer) {
         entries.forEach(function(entry) {
           if (entry.isIntersecting) {
@@ -12,7 +13,10 @@
             observer.unobserve(entry.target);
           }
         });
-      }, { threshold: 0.1 });
+      }, {
+        threshold: 0.0,
+        rootMargin: '0px 0px -10% 0px'
+      });
 
       fadeInElements.forEach(function(el) {
         el.classList.add('fade-in-hidden');
@@ -27,7 +31,7 @@
       var checkVisibility = function() {
         var windowBottom = window.innerHeight + window.scrollY;
         fadeInElements.forEach(function(el) {
-          if (el.getBoundingClientRect().top + window.scrollY < windowBottom - (el.offsetHeight * 0.1)) {
+          if ((el.getBoundingClientRect().top + window.scrollY) < windowBottom - (el.offsetHeight * 0.1)) {
             el.classList.add('fade-in-visible');
           }
         });