0

首先，我的工作演示：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”中也有这个错误的作用。当改回相对时，它恢复正常，而不是剪辑。但是，当访问者向下滚动网站时，客户希望标题保持位置固定。所以我也改不了。。

我的问题是，为什么它在 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 用于调用 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
});
4

3 回答 3

6

终于找到了一个可行的解决方案。

添加transform-style:preserve-3d到导致溢出隐藏的“.owl-wrapper-outer”的 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;
}
于 2015-03-05T03:22:45.513 回答
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); 
}
于 2016-06-23T10:46:14.237 回答
0

我有一个类似的问题，并用简单的 CSS 修复它：

.owl-carousel .owl-stage-outer {
    overflow: inherit;
}
于 2016-04-24T16:44:32.037 回答