Position Fixed and Backface Visibility

Question

I have three sectioning areas and within these I have a header element and a child item that is position fixed.

As the user scrolls I want the next section to go over the previous section including its fixed child.

I have this working in Chrome by using backface visibility:

-webkit-backface-visibility: hidden;    
-moz-backface-visibility: hidden;   
-ms-backface-visibility: hidden;    
backface-visibility: hidden;

But in FF, the fixed items are no longer fixed. Take a look at the my jsfiddle http://jsfiddle.net/7KjXm/5/

Is this expected behaviour? Is there a cross browser solution? Or is JS the way to go?

Thanks....

Answer 1

I managed to solve the effect you were looking for. Unfortunately, it does not seem possible to do with only css (yet).

Here is my solution that uses jquery and modified css of the original page. I switched to numbers instead of colored elements and changed the sizes.

My javascript for fake floating elements (allows for them to be hidden when the view moves away):

$(function(){
    elem = $('.fixeditem');
    win  = $(window);
    wrap = $('<div>').css({
        width: elem.width(),
        height: elem.height()
    });
    elem.wrap(wrap);
    win.scroll(function() {
        elem.each(function(index, element){
            element = $(element);
            var offset = element.parent().offset().top;
            element.css('top', win.scrollTop() + 40 - offset);
        });
    });
});

My custom css for this specific example:

html, body{
    height: 100%;
}

.item {
    min-height:100%;
    background-color: white;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.header {
    position: relative;
    background-color: green;
    padding: 5px;
    z-index: 2;
}

.fixeditem {
    position: relative;
    top: 10%;
    left: 50%;
    z-index: 0;
}

Colored update of code: http://jsfiddle.net/8F2Zc/4/

Hope this helps!