# Fix "tela preta gigante" no fim da page 2873 - v8

**Data:** 2026-08-18 23:23 BRT
**Sintoma reportado:** Renato viu enorme faixa de fundo preto no fim da landing
`https://www.px3lab.com.br/server-photorf/` em mobile (e provavelmente desktop).

## Causa raiz (3 problemas empilhados)

1. **Fallback CSS agressivo demais:** o iframe estava com
   `min-height: 8500px` desktop / `13000px` mobile. Se o postMessage nao rodava
   a tempo, o iframe ficava travado nesses valores gigantes.

2. **Bug de medicao no filho:** o script filho usava
   `Math.max(body.scrollHeight, documentElement.scrollHeight, ...)`. No viewport
   375 o botao fixed do WhatsApp inflava `documentElement.scrollHeight` em 386px
   alem do conteudo real, esticando o iframe alem do necessario.

3. **Chrome do tema The7 vazando pra fora do iframe:**
   - `.single-share-box` + `.share-link-description` (share bar, 24px cada)
   - `#scroll-top / a[href*="#top"]` (link "Go to Top" que aparece quando
     Complianz libera scripts pos-cookie-consent, 396px no mobile)
   - `.grecaptcha-badge` (badge fixed, mas eventualmente injetada no fluxo)

## Fix aplicado (v8)

### 1. Novo script filho (dentro do srcdoc)

```js
(function(){
  if(window.parent===window)return;
  var lastH=0;
  function measure(){
    // Ignora elementos position:fixed (WhatsApp button etc)
    var maxBottom=0;
    var all=document.body.getElementsByTagName("*");
    for(var i=0;i<all.length;i++){
      var el=all[i];
      var cs=getComputedStyle(el);
      if(cs.position==="fixed"||cs.display==="none"||cs.visibility==="hidden")continue;
      var r=el.getBoundingClientRect();
      if(r.height<1)continue;
      var b=r.top+window.scrollY+r.height;
      if(b>maxBottom)maxBottom=b;
    }
    return Math.max(Math.ceil(maxBottom),document.body.scrollHeight);
  }
  function send(){
    var h=measure();
    if(Math.abs(h-lastH)>3){
      lastH=h;
      try{window.parent.postMessage({type:"serverphotorf:resize",height:h},"*");}catch(e){}
    }
  }
  window.addEventListener("DOMContentLoaded",send);
  window.addEventListener("load",function(){
    send();
    [100,300,600,1000,1500,2500,4000,6000].forEach(function(t){setTimeout(send,t);});
  });
  window.addEventListener("resize",send);
  if(window.ResizeObserver){new ResizeObserver(send).observe(document.body);}
  window.addEventListener("message",function(ev){
    if(ev.data&&ev.data.type==="serverphotorf:probe"){
      lastH=0;send();
    }
  });
})();
```

### 2. Novo script pai (probe defensivo + fallback controlado)

```js
(function(){
  var f=document.getElementById("sphotorf-frame");
  if(!f)return;
  var isMobile=window.matchMedia("(max-width:768px)").matches;
  var lastReported=0;
  window.addEventListener("message",function(ev){
    var d=ev.data;
    if(d&&d.type==="serverphotorf:resize"&&typeof d.height==="number"&&d.height>200){
      lastReported=d.height;
      f.style.height=(d.height+2)+"px";
    }
  });
  function probe(){
    try{f.contentWindow.postMessage({type:"serverphotorf:probe"},"*");}catch(e){}
  }
  var probeCount=0;
  var probeInterval=setInterval(function(){
    probeCount++;
    probe();
    if(probeCount>=12){clearInterval(probeInterval);}
  },500);
  // Fallback so aciona se nada chegou em 4s (ultima linha de defesa)
  setTimeout(function(){
    if(lastReported<200){
      f.style.height=isMobile?"13000px":"8500px";
    }
  },4000);
  window.addEventListener("resize",function(){setTimeout(probe,200);});
})();
```

### 3. CSS

- `iframe` inicia com `height: 800px` (nao min-height gigante).
- Escondido: `.single-share-box, .share-link-description, a[href*="#top"],
  .scroll-top, #scroll-top, .go-to-top, #go-to-top, .grecaptcha-badge`.

## Resultado medido pos-fix (v8)

Testado com Playwright em 5 viewports, 12s wait pos-load:

| viewport      | body pai | iframe pai | inner iframe | preto sobrando |
|---------------|----------|------------|--------------|-----------------|
| 375x812       | 14768    | 14698      | 14695        | 70px (chrome The7) |
| 390x844       | 14500    | 14430      | 14427        | 70px |
| 768x1024      | 12195    | 12125      | 12122        | 70px |
| 1366x768      | 9566     | 9556       | 9553         | 10px |
| 1440x900      | 9566     | 9556       | 9553         | 10px |

**Antes:** ate 3000px de preto (2958px medido desktop, 500+ mobile).
**Depois:** 10-70px, imperceptivel na pratica.

Screenshots de comprovacao em:
`/opt/mia/workspace/clientes/px3lab/site_produtos/server_photorf/site/_shots/`
- `bottom_375.png`, `bottom_768.png`, `bottom_1440.png` (scroll ate o final)
- `final_end_*.png` (test suite completa)

## Backups (rollback disponivel)

- `backups/wp_page_2873_pre_v6_black_fix_20260818_230335.json` (pre-v6)
- `backups/wp_page_2873_pre_v7_black_fix_20260818_230859.json` (pre-v7)
- `backups/wp_page_2873_pre_v8_black_fix_20260818_232335.json` (pre-v8)

## Scripts de deploy

Reutilizaveis pra proximos ajustes:
- `deploy_page_2873_v8.py` (versao mais recente, usar essa como base)