change css on scroll event w/ requestAnimation Frame

Question

I want to change the background color of in-viewport elements (using overflow: scroll)

So here was my first attempt: http://jsfiddle.net/2YeZG/

As you see, there is a brief flicker of the previous color before the new color is painted. Others have had similar problems.

Following the HTML5 rocks instructions, I tried to introduce requestAnimationFrame to fix this problem to no avail:

http://jsfiddle.net/RETbF/

What am I doing wrong here?

---

Here is a simpler example showing the same problem: http://jsfiddle.net/HJ9ng/

---

Filed bug with Chromium here: http://code.google.com/p/chromium/issues/detail?id=151880

Answer 1

if it is only the background color, well why don't you just change the parent background color to red and once it scroll just change it to pink?

I change your CSS to that

#dad
{
    overflow-y: scroll;
    overflow-x: hidden;
    width: 100px;
    height: 600px;
    background-color:red;
}​

I remove some of you Jquery and change it to this

dad.bind('scroll', function() {
    dad.css('background-color', 'pink');
});

And I remove this line

iChild.css('backgroundColor', 'red');

But is the Red color it is important that won't work for sure http://jsfiddle.net/2YeZG/5/