Artistic peacock feather

The One Time Adblock Isn’t Awesome….

Pages Broken with AdBlock

The curious case of the disappearing divs

 
Browser extensions we love: Adblock logo.

Update: Since this article was written ADBLOCK has been sold and is not quite as good as it once was. If you don’t mind a little fiddling around with your browser experience, I recommend uBlock Origin. It does exactly what you expect it to do (block everything) although you do need to configure it a bit for most websites, because most sites load 3rd party assets which uBlock correctly ignores.


If you like to be advertised to, wait for additional affiliate content load, or watch promos before your content on Youtube – don’t install the AdBlock browser extension.

Why Does My Site Look Broken?

Adblock is like watching TV without the commercials, except for one tiny exception…. when it breaks things by accident.

For a real example enable Adblock in your browser and load Ad2Phoenix.com, and you’ll get this:

oops_broken

With AdBlock enabled the site is missing the most important stylesheet and appears unfinished at best. I sent a message to the site admin but it was unanswered so perhaps they would prefer to assume users are not using advertisement blocking software. I was able to figure it out but what about the next user?

Why Is My <div> Hidden/Invisible?

Another issue that can occur is that elements mysteriously go missing, and probing them with a browser tool such as Firebug finds no real reason for them to be hidden. It’s not set to visibility: none, it’s not set to display: hidden, it doesn’t have an absolute position with crazy coordinates, and it hasn’t been buried underneath some other element in the z-index stack. What gives?

If there is truly no reason for a div to go missing, check the ids and classes. Is the element named something like #right-ad? Disable AdBlock and you may well see the element go back to exhibiting predictable (and testable) behavior.

fb

Last updated on