javascript - Position Fixed and Backface Visibility - Stack Overflow

admin管理员组

文章数量:1394099

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 /

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

Thanks....

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/7KjXm/5/

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

Thanks....

• javascript
• html
• css

Share Improve this question Follow asked Feb 20, 2014 at 7:14 jigglyT101jigglyT101 98411 gold badge1515 silver badges3333 bronze badges 5

• Do you need to have actual HTML content with a fixed position? Or would a background-image suffice? – voithos Commented Feb 23, 2014 at 3:07
• 4 It's a bug, I think you'll have to work around it – Zach Saucier Commented Feb 23, 2014 at 3:50
• 1 What does backface-visibility has to do with what you want to achieve here? – Ronen Cypis Commented Feb 23, 2014 at 8:40
• 1 @az101 Chrome (Webkit) behaves wrong in this case. The backface-visibility property should have no effect in this case, as there is no CSS 3D Transform. I guess I know what you are trying to achieve, but this is not possible with CSS for now, as there is no way to change styles depending on the screen position of an element. There is a new value for the position property called "sticky" but for now only supported in Safari 6.1+. So let us know if you prefer a JS or a CSS solution? – Netsurfer Commented Feb 23, 2014 at 10:06
• Thanks all; so the spec says "The ‘backface-visibility’ property determines whether or not the "back" side of a transformed element is visible when facing the viewer." - that's obviously working in both browsers. The fact that Firefox removes any fixed positioning is a bug but also the way that Chrome is handling these fixed elements isn't correct either(?).. In that they should always be fixed relative to the viewport - no new stacking order should be applied to the containing element that has 'backface-visibility'. Is that correct? – jigglyT101 Commented Feb 24, 2014 at 18:13

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7 +50

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/8F2Zc/4/

Hope this helps!

本文标签： javascriptPosition Fixed and Backface VisibilityStack Overflow