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