DEV Community

Cover image for How to Find Ghost CSS Elements
David Ojeda
David Ojeda

Posted on • Updated on • Originally published at blog.davidojeda.dev

How to Find Ghost CSS Elements

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

Landing page with extra white space on 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;
}
Enter fullscreen mode Exit fullscreen mode

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

Landing page with ghost elements visible

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 πŸ€¦πŸ»β€β™‚οΈ

Top comments (3)

Collapse
 
lexlohr profile image
Alex Lohr • Edited

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.

Collapse
 
elugens profile image
Stacey Wilson

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.

Collapse
 
ritec profile image
Ri Caragol

This is great, thank you! Found my Ghost CSS div no problem.