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

Question

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

我的问题：当你悬停在类别菜单（智能手机、充电宝等）上时，应该有一个下拉列表，显示带图像的猫头鹰转盘子类别（我在悬停时禁用了向上滑动功能，用于此调试会话）。这在Firefox、Safari和Chrome（Mac和Windows）中已经运行良好。但是，当你开始向下滚动时，直到标题变成position:fixed，这要归功于它使用Waypoint jQuery新添加的".stack"类，在Chrome中，你会开始注意到下拉内容被剪切、隐藏。

根据我之前的检查，导致这种情况的是来自其父容器的CSS样式overflow:hidden。但这个样式是Owl Carousel jQuery的默认样式，必须使用它，因此无法更改它（如果删除，它将破坏这个旋转木马的布局）。

我的另一个发现是".head-bottom"中的position:fixed也参与了这个bug。当更改回相对时，它将恢复正常，而不是剪裁。但是，当访问者向下滚动网站时，客户希望标题停留位置固定。所以我也无法改变这一点。。

我的问题是，为什么它在Firefox和Safari中运行良好，而在Chrome中却没有？这个错误的确切原因是什么？它与CSS相关吗？它与jQuery相关吗？还是纯粹的Chrome漏洞（Windows和Mac版本）？

我的jQuery显示下拉列表：

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

我的jQuery调用猫头鹰旋转木马：

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

触发航路点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;
}

Answer 2

以上所有内容对我都不起作用，经过一些谷歌搜索，我发现了一篇对我有用的文章：http://www.lehelmatyus.com/559/owl-carousel-fix-chrome-owl-slider

.owl-carousel .owl-item {
  transform: translateZ(0);
 -webkit-transform: translateZ(0);
 -ms-transform: translateZ(0); 
}

Answer 3

我遇到了类似的问题，并用简单的CSS:修复了它

.owl-carousel .owl-stage-outer {
    overflow: inherit;
}