jQuery Owl Carousel中的内容在Chrome中被剪辑,但在Safari和Firefox中却没有？

Question

首先,我的工作演示:http://desainwebsite.com/tunasteleshop/

我的问题:当你悬停类别菜单(智能手机,移动电源等)时,应该有一个显示owl-carousel子类别和图像的下拉列表(我在鼠标悬停时禁用了上滑功能,用于此调试会话).这在Firefox,Safari和Chrome(Mac和Windows)中都运行良好.但是,当你开始向下滚动时,直到标题变为position:fixed感谢它使用Waypoint jQuery新添加的'.stuck'类,在Chrome中你将开始注意到下拉内容被剪切,隐藏.

从我之前的检查中,导致这种情况的是overflow:hidden 来自其父容器的CSS样式.但是这种风格是Owl Carousel jQuery的默认风格,必须使用它才能改变它(如果删除它会破坏这个轮播的布局).

我的另一个发现是position:fixed".header-bottom"中也有这个bug的作用.当改回亲戚时,它会恢复正常,不会被剪裁.但是,当访问者滚动网站时,客户希望标题停留位置固定.所以我也无法改变这一点..

我的问题是,为什么世界上它在Firefox和Safari中运行良好而在Chrome中运行良好？这个bug究竟是什么原因造成的？它与CSS有关吗？是jQuery相关吗？还是纯粹的Chrome bug(Windows和Mac版本)？

我的jQuery用于显示下拉列表:

$(".prodnav > li").hover(function() {
    $(this).children("a").addClass("opened");
    $(this).find(".subnav-area").slideDown("fast");
    $(".body-mask").fadeIn("fast");
});

我的jQuery用于调用Owl Carousel:

$(".sac-owl").owlCarousel({
    autoPlay: false,
    items : 6,
    itemsDesktop : [1199,6],
    itemsDesktopSmall : [959,5],
    itemsTablet: [720,4],
    itemsTabletSmall : [480, 3],
       itemsMobile : [320, 3],
    navigation: true,
    pagination: false
});

触发Waypoint jquery:

$('.header-bottom').waypoint('sticky', {
    offset: 0
});

Answer 1

终于得到了一个有效的解

添加transform-style:preserve-3d到Owl Carousel CSS导致溢出隐藏的".owl-wrapper-outer"如下:

.owl-carousel .owl-wrapper-outer{
    overflow: hidden;
    position: relative;
    width: 100%;
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    transform-style:preserve-3d;
}