Disappearing whitespace when inspecting element in Chrome

I’ve got a super strange and hard to diagnose issue. Hoping that someone on this forum has run into it before. Basically, I have a wordpress + woocommerce page loading like this:

enter image description here

Read More

As you can see there is a lot of extra whitespace. The problem is I can’t figure out where the whitespace is coming from because every time I inspect element, the page removes the whitespace immediately and it looks (correctly) like this:

enter image description here

If I keep the “inspect element” window open and refresh the page, the whitespace returns, but as soon as I change the CSS in any way whatsoever (ie remove a random attribute or change anything), the page once again fixes itself.

If I locate the area where the whitespace should be (by not changing anything), there is literally nothing there that the whitespace is attached to. It’s as if it’s invisible.

I’m using Chrome (34.0.1847.131 m). Any ideas what could cause this strange behaviour?

Related posts

Leave a Reply

1 comment

  1. This seems like an issue, somehow being caused by javascript. I’ve worked with WC before, and the JS they use is really buggy. I’d suggest trying to turn off javascript, and see if the issue still occurs. The next place to check would be the template itself. After that, check woocommerces filter set/action hooks. From my experience, WC’s templates are super badly done (Seriously, who still uses tables). It caused me all sort of weird headaches as well.