CSSの位置がChromeで動作しないのを修正しました

Question

次のウェブページがあります。

http://www.bredentacademy.co.uk/courses/bredent-group-day/

スクロールすると、予約情報とボックスはFirefoxやIEとSafariで正常に動作窓、とページを下にスクロールすることを意図されていますが、Chromeで、それは視覚的に検査員にもかかわらず、（トップを起動したままそれがどこにあるべきかのボックスをレイアウトする）。

固定クラスをボックスに追加するJqueryは非常に簡単です。

function fixScroll() { 
    if ($(document).scrollTop() > 295) { 
     $('.booking_box').addClass('fixed'); 
    } else { 
     $('.booking_box').removeClass('fixed'); 
    } 
} 
$(function() { 
    $(window).on('scroll', function() { 
     fixScroll(); 
    }); 
}); 

固定クラスにはこれらの宣言があります。

&.fixed { 
     float: left; 
     position: fixed !important; 
     top: 12px; 
     width: 340px; 
     @media #{$s1200} { 
      width: 274px; 
     } 
     @media #{$s992} { 
      position: inherit !important; 
      top: auto !important; 
      width: auto !important; 
     }    
    } 

ボックス自体はブートストラップの列の中にあります。

私は同様の問題でいくつかの質問を見ましたが、解決策を見つけることができず、すべてが私を困惑させています！私はブートストラップを使用していますが、そこにも矛盾は見られません。

誰かが私が間違っている場所に気づくことができたら、私はとても感謝しています！

Answer 1

-webkit-perspective: 1000;を.mobile_panelに追加しました。

.mobile_panel {   
    -webkit-perspective: 1000; //remove this 
} 

..それを削除し、固定ブロックが完全