fix: fade-in for large elements

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');
           }
         });