La propriété de visibilité CSS ne fonctionne pas sur les navigateurs Webkit après le rappel de succès jQuery ajax

Question

Le problème:
Je fais des appels jQuery .ajax en cliquant sur des images de curseur pour naviguer dans un catalogue de livres en remplaçant le contenu d'une div par l'ajax réponse (html simple). Il y a une image de curseur qui montre seulement si le livre a plus de 1 image, qui est commandée par le code de php qui rend directement le HTML donné dans le rappel d'ajax.

Dans FF et IE> 7, le script fonctionne correctement. Mais dans les navigateurs Webkit le rappel ajax est bien fait mais il rend le CSS pas correctement. Il semble que l'image du curseur droit soit mise en cache une fois qu'elle est affichée pour la première fois, même si le livre ne contient aucune image supplémentaire. L'aspect amusant est que l'image du curseur droit est affichée mais la fonctionnalité JS ne fonctionne pas (comme il se doit car il n'y a pas d'image supplémentaire) et aussi parce que lorsque vous naviguez avec les outils de développement ouverts dans Chrome, le CSS , comme dans FF et IE7.

Il peut s'agir d'un problème d'utilisation incorrecte de $ (document) .ready?

Voici le code JS inséré sous forme de fichier .js externes:

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

Après quelques tests, je dirais que ce n'est-javascript lié et plutôt une obscure réelle redessiner bug de comportement dans WebKit. La raison pour laquelle je dis cela est que la flèche disparaît dès que vous forcez le document à redessiner (appuyez sur ctrl + a ou redimensionnez la fenêtre, ou comme vous le dites en mode dev où le document est automatiquement redessiné).

J'ai fait quelques tests et le remplacement visibility: hidden; avec display: none; dans votre classe .disabled [style.css] semble résoudre le problème.