Parallax scrolling on Material Design Lite not working?

Parallax scrolling backgrounds don't seem to work on Material Design Lite. Or I'm doing it wrong.

This is my problem: http://ift.tt/1GUUQIW

The huge whitespace in the middle is not showing the background-image or background: I'm giving it when testing it out on a HiDPI screen. However, it works on other screen sizes like MDPI and smaller ones (at least according to Chrome). I tried using a separate .parallax class with the following:

.parallax{
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}

but that didn't work nor did it work with the code that's in the image.

I'm using the Material Design Lite framework and I think it's that that's causing the issue. When I go into the Inspect Element view and remove both display: flex and display: webkit-flex on the .mdl-layout class, it seems to work.