Google Chrome cutting off bottom of long pages - html

Question

I'm developing a website and whenever I load a pretty long page on chrome, it creates some sort of a box that covers up the bottom portion of my page. The long pages look fine on Safari and Firefox; it's only Chrome that is causing this problem.
Here's what the behavior looks like:
And here's the page with the issue: https://nosh-staging.herokuapp.com/events
If you keep scrolling to the bottom, you'll notice the giant white box that covers the last 15% - 20% of the page.
Few quirks I've noticed:
I'm using a 15" MBP (1440 x 900 resolution screen) and a 27" Thunderbolt display (2560 x 1440). When I open up Chrome in the Thunderbolt display, the page loads just fine. As soon as I move the window to my 15" screen, it just covers up the whole bottom part of the page.
When I inspect the elements, all the codes seem to load just fine. It almost feels like Chrome is putting up a huge box on top of the page. When I try to click + drag to select text, I can't see the selection because of the box.
I'm currently developing on Rails 3.2.13 and Ruby 2.0.0. Tested the pages on Chrome ver. 30.0.1599.101, Firefox ver. 25.0, and Safari 7.0. I've tried disabling all the extensions and loading the page, but that did not help either.

Answer 1

I was experiencing the same issue - long pages cut off half way only in Chrome. Other answers here didn't work, but changing my css animations slightly on the element that was cut off did. I removed the forwards below, and the issue stopped. Bizarre.
Changed from:
animation: 0.2s fadeIn forwards 1 ease;
To:
animation: 0.2s fadeIn 1 ease;

Answer 2

I had a very similar problem with the bottom of the page being cut off in Chrome. The page also flickered while scrolling.
It rendered fine in all the other browsers.
The solution, in my case, was to remove {mix-blend-mode: multiply;} from an element on the page. This resulted in all of the weird render bugs going away.
I hope this is of use to someone else as it took over a day of head-scratching to figure this out.

Answer 3

Had a very similar issue on two separate projects, and this only happens in Chrome on desktop (both Mac and Windows) and Chrome for Android.
Here's what i found:
It appears CSS animations have a limited visible 'render area'.
When you apply an animation to a element using 'forwards' it remains in this state and 'render'.
This also leads to animation lag when you are animating in multiple elements within the container element that is stuck 'forwards'.
Solutions i found to work:
Reduce the animation 'area' i.e: animate elements with a smaller pixel area, not large containers.
When wanting to animate large container elements i.e: fading in all content - do not apply the animation to the container. Create an element that fully overlays your content, and animate (fade out) that instead.
#TimothyBuktu solution above helped point me in the right direction.