position fixed is not working

you need to give width explicitly to header and footer

width: 100%;

Working fiddle

If you want the middle section not to be hidden then give position: absolute;width: 100%; and set top and bottom properties (related to header and footer heights) to it and give parent element position: relative. (ofcourse, remove height: 700px;.) and to make it scrollable, give overflow: auto.

My issue was that a parent element had transform: scale(1); this apparently makes it impossible for any element to be fixed inside it. By removing that everything works normally...

It seems to be like this in all browsers I tested (Chrome, Safari) so don't know if it comes from some strange web standard.

(It's a popup that goes from scale(0) to scale(1))

if a parent container contains transform this could happen. try commenting them

-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);

Double-check that you haven't enabled backface-visibility on any of the containing elements, as that will wreck position: fixed. For me, I was using a CSS3 animation library...