Chrome 27: Fixed elements exit artifacts after jQuery animation

Question

I came across a really strange mistake. I have an element in which the background colors drop out until you take the cursor and select it.

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

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

The video is taken from the iPhone, because the problem does not occur when I use the screen recorder strange enough. This only happens inside the chrome. I tried both chrome and a clean install of chrome, all caches are cleared and this still happens.

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

EDIT (05.22.2012):

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 occurs when animation and scrolling occur simultaneously.

I froze the whole site with the problem: mirror

EDIT:

Example

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

Demo

The problem is missing. What is the difference between the following demo and the code causing the problem? I tried to cross out the parallax background code and this does not help to fix the problem. I am currently rewriting the entire css menu to see if I missed something simple.

Answer 1

temporary workaround

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

-webkit-transform: translateZ(0); 

I added this to my navigation bar style. This is basically a bizarre little hack that does nothing for the page and includes GPU acceleration. This will need to be done either until the chrome is updated, or until I rewrote the entire functionality of the menu bar. The only drawback is that resizing the window degrades performance.

more elegant solution

After all these studies and troubleshooting, it turned out that the only real problem is that chrome should completely redraw the element, and not stop at an arbitrary point and leave artifacts. Since a clean CSS solution poses some performance issues, I found a great way to get the browser to redraw the element through jQuery!

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

I use this on a maximized page and it seems to work just fine without any performance crashes. I will keep it until chrome 27 is still floating.

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

The problem does not occur when I have Composition for fixed position elements in the chrome about: flags section (chrome: // flags /). I am using Chrome Version 27.0.1453.93.

My problem is somehow related to how chrome handles the context of the stack of fixed elements and animates fixed elements as a browser scroll. This article extends the changes a bit.

How Chrome Handles Layout

layout related GPU acceleration

Answer 2

As soon as this answer appeared first when looking for this problem, I thought it would be useful to associate with another answer that seemed to completely solve the problem.

fooobar.com/questions/348297 / ...

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

 -webkit-backface-visibility: hidden