0

まず、私の動作デモ: http://desainwebsite.com/tunasteleshop/

私の問題：カテゴリメニュー（スマートフォン、パワーバンクなど）にカーソルを合わせると、フクロウカルーセルのサブカテゴリを画像付きで表示するドロップダウンが表示されるはずです（このデバッグセッションでは、ホバーアウト時にスライドアップ機能を無効にします）。これは、Firefox、Safari、および Chrome (Mac と Windows の両方) で既にうまく機能していました。しかし、スクロールダウンを開始すると、ヘッダーがWaypoint jQueryposition:fixedを使用して新しく追加された「.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");
});

そして、Owl Carousel を呼び出すための私の 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
});

Waypoint jquery をトリガーします。

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

3 に答える 3

6

最後に実用的な解決策を得ました。

transform-style:preserve-3d次のように、overflow-hidden ".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 に答える