Position Fixed und Backface Visibility

Question

Ich habe drei Sektionsbereiche und innerhalb dieser habe ich ein Header-Element und ein untergeordnetes Element, das Position festgelegt ist.

Während der Benutzer scrollt möchte ich den nächsten Abschnitt über den vorherigen Abschnitt einschließlich seiner festen untergeordneten gehen.

Ich habe diese Arbeit in Chrome von Rückseiten Sichtbarkeit mit:

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

Aber in FF, die festen Elemente sind nicht mehr festgelegt. Werfen Sie einen Blick auf die my jsfiddle http://jsfiddle.net/7KjXm/5/

Ist das erwartete Verhalten? Gibt es eine Cross-Browser-Lösung? Oder ist JS der Weg zu gehen?

Danke ....

Answer 1

gelang es mir, den Effekt zu lösen, die Sie gesucht haben. Leider scheint es nicht möglich, nur mit css (yet) zu tun.

Here ist meine Lösung, die jquery und modifizierte CSS der ursprünglichen Seite verwendet. Ich wechselte zu Zahlen statt zu farbigen Elementen und änderte die Größen.

Meine Javascript für gefälschte Schwimmelemente (ermöglicht ihnen verborgen werden, wenn der Blick weg bewegt):

$(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); 
     }); 
    }); 
}); 

Meine benutzerdefinierte CSS für dieses spezielle Beispiel:

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; 
} 

Farbige Aktualisierung von Code : http://jsfiddle.net/8F2Zc/4/

Hoffe, das hilft!