'main' content is occasionally bleeding into footer (but only in staging)
switching a content pipeline away from wordpress.
everything is going well but there is a tiny difference that has to be simple but throwing everyone for a loop.
on this production page, when you scroll the main page... you only see the 'main' content when it's visible:
https://pracplay.com/partners
(same as: https://pracplay.com/index.php/partners/ )
on the staging page, [if the window is resized, or you're on mobile] you can usually see the non-visible content from 'main' in the footer (see attached pic, or live at: https://stage.pracplay.com/partners )
what we've tried:
- running diffs of production html (very little js used)
- fixed everything obviously off
it appears to be something related to z-index of the footer div, or the transparency of the footer div.
also tried:
- force zindex of footer absurdly high it has no effect
- changing the opacity or playing with background color alpha channel of footer doesn't reproduce it.
Our issue should be even simpler than this since we're just reproducing an existing site, with all same css. So it should be a class name issue on a div or something even simpler... but the diff isn't pointing out anything so modifying raw html to identify the problem is where we're at in this post.
this has to be so simple to fix i figured i'd try to post my understanding here and see if it generated any suggestions or ideas.
attaching a screenshot for experts who don't want to look at site but know problem from observation/experience.
(we primarily develop non-web applications but it's been exciting to get away from wordpress and have web use same processes that our other apps use.)
any help appreciated!
Ok asked someone with fresh eyes take a look.
It was pretty simple and had nothing to do with fixed/relative, z-order nor transparency (at least not directly).
They ran staging-v-prod diffs again on the actual page mentioned here. It was pretty clearly missing one div wrapper, with class id of 'page-content' This page-content class was applying an explicit white background to the main/central content of pages. So when it was missing, these divs were transparent and were bleeding into the footers.
So while it appeared like a footer issue, it was actually a page content issue.
Now staging matches production in this respect.
A particularly helpful tool was textcompare's html comparator view:
Which was a little easier to spot the html differences than a regular diff.