JQuery scrollTop causes problems in Chrome

Question

I'm hoping some genius can help me debug my JQuery function. It works fine on Firefox and Safari but on Chrome it fails to completely render the background. The strange thing is that it fixes itself if I resize my browser window in any way.

The JQuery is also causing the hover properties on the top navigation to break whenever you scroll down on the site.

I am new to the world of coding so I could really use some help. I'm convinced it has something to do with "window.scroll" but I really don't know.

You can visit my site: Here

I made a JFiddle: Here

And I've pasted my Javascript/JQuery below:

$("document").ready(function() {
    flag=true;
    $(window).scroll(function(){
        st = $(window).scrollTop();
        if(st>170){
            if(flag);
            $("#flipBox_contain").css("opacity", ".2");
            $("#flipBox_contain").css({"position": "relative"});
        }
        else if(st<170){
            if(flag);
            $("#flipBox_contain").css("opacity", "1");
            $("#flipBox_contain").css("position", "");
        }
        if(st>400){
            if(flag);
            $("#introText").css("opacity", ".2");
            $("#introText").css({"position": "relative"});
        }
        else if(st<400){
            if(flag);
            $("#introText").css("opacity", "1");
            $("#introText").css("position", "");
        }
        if(st>500){
            if(flag);
            $("#psLogo").css("top","0px");
            $("#psLogo").css("opacity","1");
            $("#psBar").css("width","98%");
            $("#psLabel").css("opacity","1");
            $("#psSkill").css("opacity","1");
            setTimeout (function(){
                $("#aiLogo").css("top","0px");
                $("#aiLogo").css("opacity","1");
                $("#aiBar").css("width","93%");
                $("#aiLabel").css("opacity","1");
                $("#aiSkill").css("opacity","1");
            }, 500);
            setTimeout (function(){
                $("#htmlLogo").css("top","0px");
                $("#htmlLogo").css("opacity","1");
                $("#htmlBar").css("width","80%");
                $("#htmlLabel").css("opacity","1");
                $("#htmlSkill").css("opacity","1");
            }, 1000);
            setTimeout (function(){
                $("#cssLogo").css("top","0px");
                $("#cssLogo").css("opacity","1");
                $("#cssBar").css("width","80%");
                $("#cssLabel").css("opacity","1");
                $("#cssSkill").css("opacity","1");
            }, 1500);
            setTimeout (function(){
                $("#javaLogo").css("top","0px");
                $("#javaLogo").css("opacity","1");
                $("#javaBar").css("width","60%");
                $("#javaLabel").css("opacity","1");
                $("#javaSkill").css("opacity","1");
            }, 2000);
            setTimeout (function(){
                $("#phpLogo").css("top","0px");
                $("#phpLogo").css("opacity","1");
                $("#phpBar").css("width","40%");
                $("#phpLabel").css("opacity","1");
                $("#phpSkill").css("opacity","1");
            }, 2500);
            /*setTimeout (function(){$("#psLabel").css("opacity","1")}
            , 1600);
            setTimeout (function(){$("#psSkill").css("opacity","1")}
            , 2100)*/
        }
        else if (st<170){
            if(flag);
            $("#psLogo").css("top","100px");
            $("#psLogo").css("opacity","0");
            $("#psBar").css("width","0");
            $("#psLabel").css("opacity","0");
            $("#psSkill").css("opacity","0");
            setTimeout (function(){
                $("#aiLogo").css("top","100px");
                $("#aiLogo").css("opacity","0");
                $("#aiBar").css("width","0");
                $("#aiLabel").css("opacity","0");
                $("#aiSkill").css("opacity","0");
            }, 500);
            setTimeout (function(){
                $("#htmlLogo").css("top","100px");
                $("#htmlLogo").css("opacity","0");
                $("#htmlBar").css("width","0");
                $("#htmlLabel").css("opacity","0");
                $("#htmlSkill").css("opacity","0");
            }, 1000);
            setTimeout (function(){
                $("#cssLogo").css("top","100px");
                $("#cssLogo").css("opacity","0");
                $("#cssBar").css("width","0");
                $("#cssLabel").css("opacity","0");
                $("#cssSkill").css("opacity","0");
            }, 1500);
            setTimeout (function(){
                $("#javaLogo").css("top","100px");
                $("#javaLogo").css("opacity","0");
                $("#javaBar").css("width","0");
                $("#javaLabel").css("opacity","0");
                $("#javaSkill").css("opacity","0");
            }, 2000);
            setTimeout (function(){
                $("#phpLogo").css("top","100px");
                $("#phpLogo").css("opacity","0");
                $("#phpBar").css("width","0");
                $("#phpLabel").css("opacity","0");
                $("#phpSkill").css("opacity","0");
            }, 2500);
        }//--closes else if
        else{flag=false;}
    }); //--closes window.scroll function
}); //--closes document ready function

Answer 1

The problem is finally solved! After some considerable 'process-of-elimination' troubleshooting it came down to a simple misuse of the z-index property. I edited all the divs with z-index so the the values were consistent and none of them were too high (eg: 200) or too low (eg: -99), instead making them all 0, 1 or 2. That solved Chromes repainting issues. Hopefully this helps someone else out there.

Answer 2

Get rid of the negative z-index value you have on .wrapper. This is not a valid value.

See this link for more.