Question

The problem:
I make jQuery .ajax calls by clicking on some cursor images in order to navigate through a book catalog replacing the content of a div with the ajax response (plain html). There is a cursor image that only shows if the book has more than 1 picture, that is controlled by php code that renders directly the HTML given in the ajax callback.

In FF and IE > 7 the script works properly. But in Webkit browsers the ajax callback is well made but it renders the CSS not properly. It seems like the right cursor image gets cached after it gets shown for first time, even though the book may have not any extra images. The fun stuff is that the right cursor image is shown but JS functionality is not working (as it should because there is no extra image) and also because when you navigate with developer tools open in Chrome, the CSS renders fine, as it should be, like in FF and IE7.

It may be a problem of incorrect use of $(document).ready ?

This is the JS code inserted as external .js file:

function goBook(val, dir, lang){
    var direction = '';
    var inverse = '';
    if(dir == 'down'){
         direction = '+';
         inverse = '-';
    }else{
         direction = '-';
         inverse = '+';
    }
    $(document).ready(function(){
         $("div.itemlateral").animate({'top': inverse+"500px"});
         $.ajax({
             url: "projects",
             type: "POST",
             data: { book: val, pic: 0, language: lang },
             dataType: "json",
             success: function(data){
                 $("div.inner-content").html(data.projects);
                 $("div.itemlateral").css({'top': direction+"1000px"});
                 $("div.itemlateral").animate({'top': "0px"});
                 }
             });
         });
     }
}

function nextImg(val, val2, dir, lang){
    var direction = '';
    var inverse = '';
    if(dir == 'right'){
        direction = '+';
        inverse = '-';
    }else{
        direction = '-';
        inverse = '+';
    }
    $(document).ready(function(){
        $("div.node-image").animate({'left': inverse+"500px"});
        $.ajax({
            url: "projects",
            type: "POST",
            data: { book: val, pic: val2, language: lang },
            dataType: "json",
            success: function(data){
                         $("div.inner-content").html(data.projects);
                         $("div.node-image").css({'left': direction+"1000px"});
                         $("div.node-image").animate({'left': "0px"});
                      }
            });
     });
}

Answer 1

After some testing I’d say that this is none-javascript related and rather an actual obscure redraw behavioral bug in webkit.

The reason I say this is because the arrow disappears as soon as you force the document to redraw (press ctrl+a or resize the window, or as you say in dev mode where the document is redrawn automatically).

I did some testing and replacing visibility: hidden; with display: none; in your .disabled [style.css] class seems to fix the problem.