JQuery Scrollable缺少位置onload和API查詢在webkit瀏覽器

Question

奇怪的問題，我正在this在右下角工作是一個可移動部分向左或向右移動的歷史部分。在加載時，它會選擇一個隨機數並移動到它。

問題是在加載時（沒有移動）它加載到錯誤的位置，並且隨着api移動它移動到錯誤的偏移位置（右圖像沒有正確定位）。這個問題只在發生的Webkit瀏覽器（Safari瀏覽器和鉻）

任何幫助將不勝感激，因爲我似乎無法得到的這個IE和FF表現良好奇怪的底部！ :(

的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;} 

更新

真的很奇怪，我已經在jsFiddle上設置了它，它可以在所有瀏覽器中正常運行。具有完全相同的代碼。不是它更混亂。頁面上的某些「其他」必須影響它。

更新2

在某種程度上我剛纔「固定」它，但它是一個骯髒的小黑客 - 不理想，但工作原理：

$(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

通過使用自定義定位，而不是固定的可加載的可滾動功能。

$(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") 
});