修复了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;
        }               
    }   

盒子本身就位于引导栏内。

我已经看到了一些类似问题的问题，但是找不到解决方案，整个事情让我感到困惑！ 我正在使用Bootstrap，但也看不到那里的任何冲突。

如果有人能发现我要去哪里错了，我将非常感激！

Answer 1

您已经添加了-webkit-perspective: 1000; 在.mobile_panel 。

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

删除它。您的固定块将正常工作