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 🤦🏻♂️
Top comments (3)
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.
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.
This is great, thank you! Found my Ghost CSS div no problem.