小编Mys*_*ryE的帖子

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

首先,我的工作演示: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");
});
Run Code Online (Sandbox Code Playgroud)

我的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
});
Run Code Online (Sandbox Code Playgroud)

触发Waypoint jquery:

$('.header-bottom').waypoint('sticky', {
    offset: 0
});
Run Code Online (Sandbox Code Playgroud)

hidden google-chrome fixed clipped owl-carousel

0
推荐指数
1
解决办法
6628
查看次数

标签 统计

clipped ×1

fixed ×1

google-chrome ×1

hidden ×1

owl-carousel ×1