Содержимое в jQuery Owl Carousel было вырезано в Chrome, но не в Safari и Firefox?

Прежде всего, моя рабочая демонстрация: http://desainwebsite.com/tunasteleshop/

Моя проблема: при наведении курсора на меню категорий (смартфон, powerbank и т. Д.) Должен быть раскрывающийся список, в котором отображается подкатегория owl-carousel с изображением (я отключаю функцию сдвига вверх при наведении курсора на эту сессию отладки). Это уже хорошо работало в Firefox, Safari и Chrome (как Mac, так и Windows). НО, когда вы начинаете прокручивать вниз, пока заголовок не станет position:fixed Благодаря недавно добавленному классу.stuck с использованием Waypoint jQuery в Chrome вы заметите, что выпадающий контент обрезан, скрыт.

Из моего предыдущего осмотра, тот, который вызвал это, был стиль CSS overflow:hidden из родительского контейнера. Но этот стиль используется по умолчанию в 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 для вызова Сова Карусель:

$(".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
});
Источник

3 ответа

Наконец-то получил рабочее решение.

добавлять transform-style:preserve-3d к 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;
}
Источник

Ни один из вышеперечисленных не работал для меня, после того, как гугл сомов я нашел статью, которая сделала мне трюк: 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); 
}
Источник

У меня была похожая проблема, и я исправил ее простым CSS:

.owl-carousel .owl-stage-outer {
    overflow: inherit;
}
Источник
Другие вопросы по тегам