JQuery Scrollable Missing position onload et sur api chercher dans les navigateurs webkit

Question

Etrange problème que je rencontre en travaillant sur this dans le coin en bas à droite est une section de l'histoire avec une section déroulante qui se déplaçait à droite ou à gauche. En charge, il choisit un nombre aléatoire et se déplace vers lui.

Problème: en charge (sans déplacement), le chargement se fait dans la mauvaise position et en se déplaçant avec l'API, il se déplace vers le mauvais décalage (l'image de droite n'est pas correctement positionnée). Ce problème ne se produit que dans Webkit navigateurs (Safari et chrome)

Toute aide serait grandement apprécié que je ne peux pas semble aller au fond de ce IE et FF se comportent bien étrange! :(

JavaScript:

$(document).ready(function(){ 
    $('.timeline-container').scrollable({circular: true, next: ".timeline-next", prev: ".timeline-prev"}); 
    var api_timeline = $(".timeline-container").data("scrollable"); 
    //console.info(api_timeline.getSize()); 
    var timeline_random_index = Math.floor(Math.random() * (api_timeline.getSize()+1))+1; 
    //console.info(timeline_random_index); 
    api_timeline.move(timeline_random_index, 1000); 
}); 

HTML

<div class="timeline-container"> 
    <div class="timeline-items"> 
     <div class="timeline-item"> 
      <img src="http://identica.local/wp-content/uploads/2010/10/timeline_thumb01.png" /> 
      <p><span class="timeline-item-date">1996</span> Russian Flag carrier Aeroflot created</p> 
     </div>    
     <div class="timeline-item"> 
      <img src="http://identica.local/wp-content/uploads/2010/10/timeline_thumb02.png" /> 
      <p><span class="timeline-item-date">1997</span> Universal Studios created</p> 
     </div>    
     <div class="timeline-item"> 
      <img src="http://identica.local/wp-content/uploads/2010/10/timeline_thumb03.png" /> 
      <p><span class="timeline-item-date">1998</span> Vodafone brand refresh</p> 
     </div>    
     <div class="timeline-item"> 
      <img src="http://identica.local/wp-content/uploads/2010/10/timeline_thumb04.png" /> 
      <p><span class="timeline-item-date">1998</span> Wembley Stadium identity created</p> 
     </div>    
     <div class="timeline-item"> 
      <img src="http://identica.local/wp-content/uploads/2010/10/timeline_thumb05.png" /> 
      <p><span class="timeline-item-date">2000</span> Jonnie Walker brand created</p> 
     </div>    
    </div>    
</div> 

CSS

.timeline-container {overflow:hidden; width: 245px;position:relative; min-height: 170px;height: 170px !important;} 
.timeline-container .timeline-items { width:20000em; position:absolute;} 
.timeline-container .timeline-item {float:left;text-align:center;position: relative;} 
.timeline-container .timeline-items p { font-weight: normal; font-size: 13px; margin-bottom:0;} 
.timeline-container .timeline-items span { font-weight: bold;} 

MISE À JOUR

Vraiment étrange, je l'ai mis en place sur jsFiddle et il fonctionne correctement dans tous les navigateurs. avec exactement le même code. Ce n'est pas plus déroutant. Quelque chose d'autre sur la page doit l'affecter.

MISE À JOUR 2

je viens « fixe » d'une manière, mais il est un peu sale hack - pas idéal, mais fonctionne:

$(document).ready(function(){ 
    $('.timeline-container').scrollable({circular: true, next: ".timeline-next", prev: ".timeline-prev"}); 
    var api_timeline = $(".timeline-container").data("scrollable"); 
    var timeline_random_index = Math.floor(Math.random() * (api_timeline.getSize()+1))+1; 
    var timeline_random_index_pixles = timeline_random_index * 245 * -1; 
    $(".timeline-items").css("left", timeline_random_index_pixles+"px") 
}); 

Answer 1

fixe en utilisant le positionnement personnalisé plutôt que fonctions scrollables en charge.

$(document).ready(function(){ 
    $('.timeline-container').scrollable({circular: true, next: ".timeline-next", prev: ".timeline-prev"}); 
    var api_timeline = $(".timeline-container").data("scrollable"); 
    var timeline_random_index = Math.floor(Math.random() * (api_timeline.getSize()+1))+1; 
    var timeline_random_index_pixles = timeline_random_index * 245 * -1; 
    $(".timeline-items").css("left", timeline_random_index_pixles+"px") 
});