CODEWITHSUNDEEP
google-chromehiddenfixedowl-carouselclipped
MysteryE
MysteryE

Reputation: 111

Content in jQuery Owl Carousel got clipped in Chrome, but not in Safari and Firefox?

First of all, my working demo: http://desainwebsite.com/tunasteleshop/

My problem: When you hover the category menu (smartphone, powerbank, etc), there should be a dropdown that show owl-carousel sub category with image (I disable the slide up function when hover out, for this debugging session). This was already working well, in Firefox, Safari, and Chrome (both Mac and Windows). BUT, when you start scrolling down, until the header become position:fixed thanks to its newly added '.stuck' class using Waypoint jQuery , in Chrome you will start to notice that the dropdown content got clipped, hidden.

From my earlier inspection, the one that caused this was CSS style overflow:hidden from its parent container. But this style is the default from the Owl Carousel jQuery and it must be used so it's impossible to change it (if removed, it will destroy the layout for this carousel).

My other finding was the position:fixed in the ".header-bottom" also has a role in this bug. When changed back to relative, it's back to normal, not clipped. BUT, the client wants the header stay position fixed as visitor scroll the website down. So I can't change this too..

My question, why in the world it's working well in Firefox and Safari but not in Chrome? What is exactly the cause of this bug? Is it CSS related? Is it jQuery related? Or purely Chrome bug (both Windows and Mac version)?

My jQuery for showing the dropdown:

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

And my jQuery for calling the 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
});

Trigger the Waypoint jquery:

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

Upvotes: 0

Views: 8814

Answers (3)

Peter Leijenhorst
Peter Leijenhorst

Reputation: 21

Non of the above worked for me, after soms googling i found a article which did the trick for me: 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); 
}

Upvotes: 2

MichalCh
MichalCh

Reputation: 241

I had a similar problem and repaired it with simple CSS:

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

Upvotes: 0

MysteryE
MysteryE

Reputation: 111

Finally got a working solution.

Add transform-style:preserve-3d to Owl Carousel CSS that caused the overflow-hidden ".owl-wrapper-outer" like so:

.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;
}

Upvotes: 7

Related Questions