Headers invisible with anything but a fixed header

I am not entirely sure this is an actual bug but, but it sure seems a bit odd to me. Both when visiting the material design lite website examples and when implementing it in my own code, the only way to get a coloured header, is by using a fixed header as in using the class " mdl-layout--fixed-header". All the other headers, are apart from the drawer icon factually nonexistent. So the examples for both the scrolling header and waterfall header are nothing but a completely white boxes which only show the drawer icon at the top right for me. (https://getmdl.io/components/index.html#layout-section)
I can't imagine that this is actually how it is supposed to be, because that factually neither a scrolling nor a waterfall header, but simply no header. So what is going on there?

Browser: Firefox 45.9.0 ESR
OS: Debian 8.8