Position:fixed; not behaving properly in all browsers, scrolling with page

I’m styling an element with position fixed and other css in a certain condition ( basically if the user scrolls up ), but the element is behaving like a relative positioned element. In other words, it is scrolling with the page and not remaining fixed.

I tried isolating this issue, but this issue only exists in this site as a whole and I need it to work in this site.

var lastScrollTop = 0;
    var st = $(this).scrollTop();
        //scroll up
        if($(this).scrollTop()>235) $('#searchInput').removeClass('slideIn').addClass('stickySearch');
        else $('#searchInput').removeClass('stickySearch').addClass('slideIn');
    else $('#searchInput').removeClass('stickySearch').removeClass('slideIn');
    lastScrollTop = st;

Right now the class .slideIn has no styling associated with it, but .stickySearch does. Here is the CSS:

    width:56% !important;
    position:fixed !important;

I checked in developer tools and the class is being applied and the styles are being applied, but the position fixed is just not working.

Here is a live URL: http://goo.gl/ns6UEQ

Note, it helps to have a small window in height so you can scroll. Scroll down so that the header is hidden up top and then scroll up and the search bar should appear, but the moment the header comes back into view the search bar will go back into place in the header.


It’s the transform on #container that is causing the problem.

I documented the bug a while ago and a fixed element loses its fixed position if it is in the context of a parent that has a transform applied (or backface-visibility:hidden). I mentioned in the post that I thought the mechanics were different but they are basically the same bug.

The only solution is to move the fixed element out of that context which will be awkward if you are making a sticky header as you want it to be in the flow to start with. You will either have to remove the transform from the container or instead create a duplicate fixed search element somewhere else in the page and just show that one instead when the page scrolls.