Google chrome -webkit变换和位置：固定+；位置：相对渲染问题

当position:relative元素中包含position:fixed元素，并且页面上的任何元素都具有-webkit转换时，Chrome和Safari似乎存在问题。有一个渲染问题，这有点难以解释，但您可以在此处看到：

代码：

变色
一,。单击“更改颜色”。颜色变了
二,。向下滚动，使红色框刚好位于灰色区域的一半
三,。再次单击“更改颜色”。颜色不变
四,。向下滚动更多。滚动时颜色会发生变化
H
#粘性容器{
高度：50px；
位置：相对位置；
z指数：100；
}
#粘的{
背景：红色；
高度：50px；
宽度：100px；
}
钮扣{
边缘顶部：100px；
}
#粘的，蓝色的{
背景：蓝色；
}
#长的{
高度：1000px；
背景：银；
位置：相对位置；
z指数：0；
}
.图标旋转{
显示：内联块；
-moz动画：自旋2s无限线性；
-o-动画：自旋2s无限线性；
-webkit动画：旋转2s无限线性；
动画：旋转2s无限线性；
宽度：10px；
高度：10px；
背景：黄色；
位置：绝对位置；
}
@-moz关键帧旋转{
0% {
-moz变换：旋转（0度）；
}
100% {
-莫兹变换：旋转（359度）；
}
}
@-webkit关键帧旋转{
0% {
-webkit变换：旋转（0度）；
}
100% {
-webkit变换：旋转（359度）；
}
}
@-o-关键帧旋转{
0% {
-o变换：旋转（0度）；
}
100% {
-o变换：旋转（359度）；
}
}
@-ms关键帧旋转{
0% {
-ms变换：旋转（0度）；
}
100% {
-ms变换：旋转（359度）；
}
}
@关键帧旋转{
0% {
变换：旋转（0度）；
}
100% {
变换：旋转（359度）；
}
}
$（文档）.ready（函数（）{
$（'粘性'）。粘贴（100）；
$（'button'）。在（'click'，function（）上{
$（'#sticky'）。toggleClass（'blue'）；
});
})

这在Firefox中运行良好。没有在IE中测试过

---

其他人是否也有同样的问题，是已知的bug还是我做错了什么？

这个bug也适用于chrome浏览器的beta版。在这里，你可以检查报告的错误在铬如果你的错误还没有报告，你可以张贴在那里，并希望得到答复。

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