Chrome 27: Fixed Element Leaves Artifacts Behind After JQuery Animation

Question

I have run into a really weird bug. I have an element that the background colors drops off of until you take your cursor and select it.

Here is the page: http://austinpray.com/test

Here is a video: https://www.dropbox.com/s/t1f7fnvxslebjwj/2013-05-16%2016.33.21.mov

The video is taken with an iPhone because the issue does not occur when I am using a screen recorder oddly enough. It only happens inside of chrome. I have tried both chrome and a blank install of chromium will all caches cleared and such and this still occurs.

What am I missing? I will update as I do more testing on different devices.

EDIT (05/22/2013):

I did some more research and I found the following behavior: https://www.dropbox.com/s/7tdz41l89qttmnx/2013-05-22%2017.20.20.mov

The problem seems to arise when animation and scrolling happen at the same time.

I froze the entire site with the issue here: mirror

EDIT:

Example

Here is a stripped down version of my code that actually works:

DEMO

The issue is not present in this one. What is different about the following demo and the code that is causing the issue? I have tried stripping out the parallax background code and that does nothing to fix the issue. I am currently rewriting the entire menu's css to see if I missed something simple.

Answer 1

temporary workaround

After learning a TON about how chrome renders elements (especially fixed elements) I came across this temporary solution:

-webkit-transform: translateZ(0);

I added this to my nav bar's style. This is basically a quirky little hack that does nothing to the page and turns on GPU acceleration. This will have to do for now either until chrome is updated or until I rewrite the entire menu bar functionality. The only downside is that resizing the window suffers a performance hit.

a more elegant solution

After all this research and troubleshooting I figured out that the only real problem is that chrome needs to redraw the element all the way rather than stop at an arbitrary point and leave artifacts. Since the pure CSS solution creates some performance issues I I found an excellent method of forcing the browser to redraw an element via jQuery!

$.fn.redraw = function(){
    $(this).each(function(){
        var redraw = this.offsetHeight;
    });
};

I'm using this on the deployed page and it seems to be working great with no performance hits. I'll keep it around as long as chrome 27 is still floating around.

I also found weird behavior and possibly the root of the problem:

The issue does not occur when I have Compositing for fixed position elements enabled in the chrome about:flags section (chrome://flags/). I am running Chrome Version 27.0.1453.93.

My issue is somehow connected with how chrome handles the stacking context of fixed elements and animating fixed elements as the browser scrolls. This article expands a bit on the changes.

How Chrome handles compositing

GPU acceleration as it related to compositing

Answer 2

As this answer showed up first when searching for this issue I thought it would be helpful to link to another answer that seemed to resolve the problem more fully.

https://stackoverflow.com/a/12023155/2192201

And if you don't feel like clicking through, all that was needed to prevent the artifacts while animating was this one line of css:

-webkit-backface-visibility: hidden