git.admin/roi-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(php): use visibility+min-height instead of display:none for lazy slots

Browse Source 
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>
This commit is contained in:
FrankZamora
2025-12-10 16:11:42 -06:00
parent 449e2e1740
commit 89a4fc5133
1 changed files with 17 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
Public/AdsensePlacement/Infrastructure/Ui/AdsensePlacementRenderer.php
View File

@@ -66,10 +66,15 @@ final class AdsensePlacementRenderer
// 4. Generar CSS (usando CSSGeneratorService) // 4. Generar CSS (usando CSSGeneratorService)
$lazyEnabled = ($settings['behavior']['lazy_loading_enabled'] ?? true) === true; $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( $css = $this->cssGenerator->generate(
".roi-ad-slot", ".roi-ad-slot",
[ [
'display' => $lazyEnabled ? 'none' : 'block', 'visibility' => $lazyEnabled ? 'hidden' : 'visible',
'min_height' => $lazyEnabled ? '1px' : 'auto',
'width' => '100%', 'width' => '100%',
'min_width' => '300px', 'min_width' => '300px',
'margin_top' => '1.5rem', 'margin_top' => '1.5rem',
@@ -80,8 +85,17 @@ final class AdsensePlacementRenderer
// CSS para slots con lazy loading que reciben contenido // CSS para slots con lazy loading que reciben contenido
if ($lazyEnabled) { if ($lazyEnabled) {
$css .= $this->cssGenerator->generate('.roi-ad-slot.roi-ad-filled', ['display' => 'block']); $css .= $this->cssGenerator->generate('.roi-ad-slot.roi-ad-filled', [
$css .= $this->cssGenerator->generate('.roi-ad-slot.roi-ad-empty', ['display' => 'none']); '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 // 5. Generar HTML del anuncio