Question

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

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

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

我的另一个发现是“.header-bottom”中的position:fixed也在这个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添加到导致溢出隐藏＆＃34; .owl-wrapper-outer＆＃34;的Owl Carousel CSS中像这样：

.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

以上情况不适合我，在soms上搜索后，我找到了一篇文章，为我做了诀窍：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;
}

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

3 个答案: