StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POChrome 27: Fixed Element Leaves Artifacts Behind After JQuery Animation
text
Body
copied!<p>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.</p> <p>Here is the page: <a href="http://austinpray.com/test" rel="nofollow">http://austinpray.com/test</a></p> <p>Here is a video: <a href="https://www.dropbox.com/s/t1f7fnvxslebjwj/2013-05-16%2016.33.21.mov" rel="nofollow">https://www.dropbox.com/s/t1f7fnvxslebjwj/2013-05-16%2016.33.21.mov</a></p> <p>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.</p> <p>What am I missing? I will update as I do more testing on different devices.</p> <p>EDIT (05/22/2013):</p> <p>I did some more research and I found the following behavior: <a href="https://www.dropbox.com/s/7tdz41l89qttmnx/2013-05-22%2017.20.20.mov" rel="nofollow">https://www.dropbox.com/s/7tdz41l89qttmnx/2013-05-22%2017.20.20.mov</a></p> <p>The problem seems to arise when animation and scrolling happen at the same time.</p> <p>I froze the entire site with the issue here: <a href="http://austinpray.com/stackoverflow/austinpray.com_05-22-2013/" rel="nofollow">mirror</a></p> <p>EDIT:</p> <h2>Example</h2> <p>Here is a stripped down version of my code that actually works:</p> <p><a href="http://austinpray.com/stackoverflow/cr27-render-issue/" rel="nofollow">DEMO</a></p> <p>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.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload