From 89a4fc51336a0443cb70d39f78925ba9eec2be75 Mon Sep 17 00:00:00 2001
From: FrankZamora <prime.leads.app@gmail.com>
Date: Wed, 10 Dec 2025 16:11:42 -0600
Subject: [PATCH] fix(php): use visibility+min-height instead of display:none
 for lazy slots
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

IntersectionObserver cannot detect elements with display:none because
they have 0x0 dimensions. Changed CSS approach to use visibility:hidden
with min-height:1px so IO can observe slots entering the viewport.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../Ui/AdsensePlacementRenderer.php           | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/Public/AdsensePlacement/Infrastructure/Ui/AdsensePlacementRenderer.php b/Public/AdsensePlacement/Infrastructure/Ui/AdsensePlacementRenderer.php
index fbaa6028..6c692b0d 100644
--- a/Public/AdsensePlacement/Infrastructure/Ui/AdsensePlacementRenderer.php
+++ b/Public/AdsensePlacement/Infrastructure/Ui/AdsensePlacementRenderer.php
@@ -66,10 +66,15 @@ final class AdsensePlacementRenderer
         // 4. Generar CSS (usando CSSGeneratorService)
         $lazyEnabled = ($settings['behavior']['lazy_loading_enabled'] ?? true) === true;
 
+        // Nota: Para lazy loading usamos min-height:1px para que IntersectionObserver
+        // pueda detectar el elemento. Con display:none o height:0, IO no puede observar
+        // elementos porque tienen dimensiones 0x0 en el DOM.
+        // El contenido se oculta con visibility:hidden hasta que se active el slot.
         $css = $this->cssGenerator->generate(
             ".roi-ad-slot",
             [
-                'display' => $lazyEnabled ? 'none' : 'block',
+                'visibility' => $lazyEnabled ? 'hidden' : 'visible',
+                'min_height' => $lazyEnabled ? '1px' : 'auto',
                 'width' => '100%',
                 'min_width' => '300px',
                 'margin_top' => '1.5rem',
@@ -80,8 +85,17 @@ final class AdsensePlacementRenderer
 
         // CSS para slots con lazy loading que reciben contenido
         if ($lazyEnabled) {
-            $css .= $this->cssGenerator->generate('.roi-ad-slot.roi-ad-filled', ['display' => 'block']);
-            $css .= $this->cssGenerator->generate('.roi-ad-slot.roi-ad-empty', ['display' => 'none']);
+            $css .= $this->cssGenerator->generate('.roi-ad-slot.roi-ad-filled', [
+                'visibility' => 'visible',
+                'min_height' => 'auto',
+            ]);
+            $css .= $this->cssGenerator->generate('.roi-ad-slot.roi-ad-empty', [
+                'visibility' => 'hidden',
+                'min_height' => '0',
+                'height' => '0',
+                'margin' => '0',
+                'padding' => '0',
+            ]);
         }
 
         // 5. Generar HTML del anuncio