将CSS过渡的Firefox错误与变换和背景颜色相结合

Question

我们有一个奇怪的错误，css转换与transform: translate结合并更改背景颜色。 HTML结构是左侧的侧边栏，是固定的。在这个侧边栏中是一个带文字的容器。基于y滚动位置，我通过translate更改侧边栏的背景颜色和textcontainer的y位置。两个元素都具有CSS过渡属性以具有平滑动画。正如你在下面的gif中看到的那样，它工作得并不好。 textcontainer获取侧边栏的背景颜色大约半秒钟。

为了更好地理解，这里也是jsFiddle。有人知道像我这样的类似问题吗？