Position fest Sticks zu Eltern absolut

Question

Ich habe ein interessantes Problem. Die CSS-Eigenschaftsposition, Wert fixiert, ist angeblich relativ zum Browserfenster. Aber irgendwie bleibt es in diesem Code beim Scrollen am absoluten Elternteil hängen. Wie und warum?

HTML:

<section> 
    <div class="container"> 
    <div class="wrapper"> 
     <div class="content"> 
     <div class="bar">  
     </div> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a quam ultrices libero convallis consequat eget non eros. Proin in velit ullamcorper, tristique leo id, tempus ipsum. Mauris in nisl at tortor vulputate dictum. Morbi at leo non ante euismod gravida ut sit amet massa. Suspendisse potenti. Fusce nec ultricies arcu. Sed at nunc turpis. Vivamus suscipit eu mi mollis tempor. Nullam ut urna libero. Duis finibus egestas erat, non faucibus sem placerat a. Curabitur sollicitudin porttitor urna, a eleifend diam ultrices non. Praesent lacus lectus, volutpat scelerisque lacus quis, vehicula eleifend dui. Praesent eget est magna. Sed faucibus tellus diam, commodo ultricies ipsum pulvinar et. Phasellus nec blandit tortor, eget facilisis tellus. Nulla vitae ornare neque. 
     </div> 
    </div> 
    </div> 
</section> 
<section> 
    <div class="container"> 
    <div class="wrapper"> 
     <div class="content"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a quam ultrices libero convallis consequat eget non eros. Proin in velit ullamcorper, tristique leo id, tempus ipsum. Mauris in nisl at tortor vulputate dictum. Morbi at leo non ante euismod gravida ut sit amet massa. Suspendisse potenti. Fusce nec ultricies arcu. Sed at nunc turpis. Vivamus suscipit eu mi mollis tempor. Nullam ut urna libero. Duis finibus egestas erat, non faucibus sem placerat a. Curabitur sollicitudin porttitor urna, a eleifend diam ultrices non. Praesent lacus lectus, volutpat scelerisque lacus quis, vehicula eleifend dui. Praesent eget est magna. Sed faucibus tellus diam, commodo ultricies ipsum pulvinar et. Phasellus nec blandit tortor, eget facilisis tellus. Nulla vitae ornare neque. 
     </div> 
    </div> 
    </div> 
</section> 

CSS:

section { 
    width: 100%; 
    display: block; 
    max-width: none; 
    height: 100vh !important; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    position: relative; 
} 

section .content { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    -webkit-transform: translate(-50%, -50%); 
} 

section .wrapper { 
    max-width: 770px; 
    margin: 0 auto 50px; 
    text-align: center; 
    padding: 0 25px 50px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

.bar { 
    display: block; 
    width: 100%; 
    height: 30px; 
    background: #00aeef; 
    margin-bottom: 40px; 
} 

.bar.fixed { 
    position: fixed; 
    top: 0; 
} 

jQuery:

$(window).scroll(function() { 
    var scrollPos = $(document).scrollTop(); 
    if(scrollPos > $('.bar').offset().top) { 
     $('.bar').addClass('fixed'); 
    } else { 
    $('.bar').removeClass('fixed'); 
} 
}).scroll(); 

https://jsfiddle.net/bg6cqcfp/1/

Answer 1

Nun scheint es, die Transformation Eigenschaft Schuld ist hier.

transform: translate(); 

Ich habe ein ähnliches Problem nach der Verwendung von Google mit anderen Keywords gefunden. Nach dem Entfernen dieser Elemente vom übergeordneten absoluten Element verschwindet das Problem. Seltsam.