Position fixed sticks to parent absolute - html

Question

I have an interesting problem. The CSS property position, value fixed, is supposedly relative to the browser window. Yet, somehow, in this code it sticks to the parent which is absolute, when scrolled. How and why?
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

Well, it appears the transform property is at fault here.
transform: translate();
I managed to find a similar issue after using Google with different keywords. After removing those from the parent absolute element, the issue disappears. Weird.