-webkit-transform and position:fixed + position:relative rendering issue - google-chrome

Question

It seems that there is an issue with Chrome and Safari when there is an element with position:fixed contained in an element with position:relative and any element on the page has -webkit-transform. There is a rendering issue, which is a bit hard to explain but you can see it here: http://jsfiddle.net/ragulka/byGGH/1/
Code:
<div id="sticky-container">
<div id="sticky">
<div class="test"></div>
</div>
</div>
<div id="long">
<button class="pull-right">Change color</button>
<ol>
<li>1. Click change color. The color changes.</li>
<li>2. Scroll down so that the red box is just half-way over the gray area.</li>
<li>3. Click change color again. The color does not change.</li>
<li>4. Scroll down even more. The color changes while you scroll.</li>
</ol>
</div>
<i class="icon-spin">H</i>
<style type="text/css">
#sticky-container {
height: 50px;
position: relative;
z-index: 100;
}
#sticky {
background: red;
height: 50px;
width: 100px;
}
button {
margin-top: 100px;
}
#sticky.blue {
background: blue;
}
#long {
height: 1000px;
background: silver;
position: relative;
z-index: 0;
}
.icon-spin {
display: inline-block;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
-webkit-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
width: 10px;
height: 10px;
background: yellow;
position: absolute;
}
#-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
}
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
}
}
#-o-keyframes spin {
0% {
-o-transform: rotate(0deg);
}
100% {
-o-transform: rotate(359deg);
}
}
#-ms-keyframes spin {
0% {
-ms-transform: rotate(0deg);
}
100% {
-ms-transform: rotate(359deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" />
<script type="text/javascript">
$(document).ready(function() {
$('#sticky').affix(100);
$('button').on('click', function() {
$('#sticky').toggleClass('blue');
});
})
</script>
This works fine in Firefox. Haven't tested in IE.
Does anyone else have the same issue, is it a known bug or am I doing something wrong?