How to Find Ghost CSS Elements

Publish Date: May 11 '18

70 4

I recently came across a bug on our landing page which caused a weird blank space overflow on the right side:

I looked for a couple of hours trying to find any CSS spacing causing it, or some wrong element on my HTML, but couldn't find anything out of place. The blank space wasn't even inside the <html> element of the page 🧐

I then stumbled upon this post and rapidly found the problem. This blog post suggests some CSS styles to make ghost elements visible 👻:

* {
  background: #000 !important;
  color: #0f0 !important;
  outline: solid #f00 1px !important;
}

Now, I could find the section that was causing the problem:

In the end, it was a matter of fixing some mismatching HTML elements.

Would've had this CSS styles helping me debug from the beginning, could've saved me a couple hours of work 🤦🏻‍♂️

Comments 4 total

Alex LohrMay 13, 2018

You forgot visibility: visible and opacity: 1 - and the same on :before and :after. Also, you could iterate over all nodes and use node.getBoundingClientRect() to find the ones that are as wide or wider as document.body.
Stacey WilsonDec 10, 2020
Another issue that can cause ghost divs is chrome extensions. They are the worse and cause a lot of headaches. The solution is to either turn of the extension or remove it in total.
Ri CaragolJul 27, 2021
This is great, thank you! Found my Ghost CSS div no problem.

Add comment

David Ojeda @david_ojeda

How to Find Ghost CSS Elements

Comments 4 total