O Adblock muda como o Chrome renderiza as páginas?

StackOverflow https://stackoverflow.com/questions/4013582

Pergunta

Estou projetando/construindo um site e, como um bom desenvolvedor, estou de olho em como as coisas renderizam em todos os navegadores populares - as versões atuais do Firefox, Chrome, Safari (para Windows) e Chrome e Internet Explorer (8, não a visualização 9).

De qualquer forma, tudo parecia absolutamente bom em Chrome para mim, mas um amigo meu que me deu algum feedback me disse: "Oh, btw, seu site se torna horrivelmente no Chrome". Eu dei a ele a resposta padrão de "trabalhos na minha máquina" e ele respondeu que achava que deveria ser um problema de extensão.

Ele me deu uma pequena lista das extensões populares que ele usa e, após um pouco de tentativa e erro, descobri que o problema está no Adblock. Não vou aborrecê -lo muito com os detalhes do problema de renderização real, mas notamos algo estranho. Não era que o Adblock estivesse bloqueando algo na página, mas que a mera presença de Adblock no Chrome estava causando o problema. Eu sei disso porque o problema persiste mesmo quando a) pausarei o Adblock e b) quando excluo especificamente essa página/site de ser adblock.

Desde então, corrigi o problema (notei -o anteriormente em um Firefox 3.0 "BrowserShot", mas corrigi o bug apenas no Firebug - eu ainda não o havia aplicado na cópia real), mas me deixou pensando se lá são outros problemas dos quais devo estar ciente.

Também não parece ser uma questão de peculiaridades versus padrões. document.compatmode ainda mostra "css1compat" (modo de padrões) e, quando removo a definição do doctype para acionar o modo Quirks, o site ainda renderiza corretamente (embora com algum estofamento tenha mudado em alguns lugares - nada para se preocupar).

Alguém já notou esse problema antes? O Adblock muda fundamentalmente a maneira como o Chrome renderiza as páginas, mesmo que não esteja ativo nesse site específico?

Editar #1:

Fica mais estranho. Tentei criar um exemplo, mas isso não renderia indevidamente por algum motivo. Por fim, copiei o HTML original (ou seja, falhando) em um novo arquivo e joguei todo o arquivo CSS em um <style> tag no <head> do documento. Isto ainda trabalhado.

Um pouco de tentativa e erro, e eu determinei que o problema só existe ao incluir CSS via <link rel="stylesheet"> mas não através da <style>.

Alguém poderia por favor explicar o que está acontecendo aqui?

Editar #2:

Aqui está o código com o qual estou trabalhando:

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Demo</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <div id="outer">
      <img src="placeholder.png" width="150px" height="150px" />
      <div id="inner">
        <h1>Test</h1>
        <p>Lorem ipsum blah blah blah</p>
      </div>
    </div>
  </body>
</html>

 

CSS:

    #outer {
      border: 1px solid #000;
      width: 700px;
    }

    #inner {
      float: right;
      width: 540px;
    }

Se você quiser experimentar isso, eu coloquei alguns arquivos no meu servidor:

Foi útil?

Solução

Parece ser um problema na maneira como o Chrome reflows o conteúdo após o CSS ter sido modificado - você pode reproduzir exatamente a mesma renderização seguindo estas etapas:

  1. Desative o adthwart, recarregue o Chrome.
  2. Carregue a página (qualquer um dos dois).
  3. Vá no inspetor Chrome - selecione o elemento interno div#.
  4. Desativar, depois reativar, o float: right; Atributo CSS.

Seria uma boa ideia arquivar um relatório de bug, se ainda não existir - é um webkit ou um bug do Chrome.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top