【slick】
slickで複数のyoutube動画を
スライダーにする際、
IE11で前後の画像が表示されるバグ？

  • 【slick】
    slickで複数のyoutube動画をスライダーにする際、IE11で前後の画像が表示されるバグ？

    JavaScript

    目次

    どうも！こんにちは！

    約1年ぶりの登場です。笑

    ちょっと仕事が忙しくなってそこに追われていたら、このブログ更新を忘れていました。。

    それとここ最近はReactのフレームワーク？である、Next.jsで使い方やgoogleのfirebaseを使用してお勉強などしていました。
    こちらに関しても、またお知らせしていければと思います。

    今回は、

    • ・複数のyoutube動画をスライダーにする。
    • ・jsonデータを取得して、動的にyoutubeスライダーを生成する。

    というのを仕事で対応したのですが、IE11対応で工数を使わされたので、備忘録も込めて書いていきたいと思います。

    それではスタートです！

    概要

    今回の要件は以下です。

    1. ・ HTMLファイル内にiframeで記述した複数のyoutube動画をスライダーにする。
    2. ・ youtubeデータを管理しているjsonをJavaScriptで読み込み、動的にiframeを生成してスライダーにする。
    3. ・ 1と2をクラスやidなどで出し分けられるようにする。

    というところです。

    スライダーに関してはそのサイトが、bxSlider、slickを読み込んでいたのでslickで対応しました。

    bxSlider
    slick


    んで、この要件はどうにか成功することはできたのですが、IE11でスライダーの挙動がおかしいことが発生しました。

    IE11での挙動

    IE11でのおかしい挙動ですが、

    • ・スライダー前後（または前、後ろのどちらか）の画像（iframeでyoutube動画を生成しているサムネイル？）の残像が残る。

    という感じです。

    検索すると「チラつく」、「カタつく」というのは結構でてくるのですが、「残像」という感じでは全くヒットしなかったです。

    というのも、
    発生するタイミングというのが分からず、発生する場合もあれば発生しない場合もあり、
    あまり発生しない現象なのかもしれません。

    対処法

    対処法ですが、slickのオプションにある、

    • ・useCss
    • ・useTransform

    この2つをIE11の時だけfalseにするということで一旦回避できました。

    UA判定は今後Chromeが廃止していくということもありあまり使いたくはないのですが、
    IE11のみに適用させるという内容でしたので使用しました。

    コード

    コードとしては特になんてことないですが、一応どのように対処したかを貼っておきます。

    まずはIE判定です。

    // IE判定
const UA = navigator.userAgent.toLowerCase();
  let isIE = false;

  if (UA.indexOf('trident') !== -1 || UA.indexOf('msie') !== -1) {
   isIE = true;
  }

    普通にIE11だけがヒットするようにindexOfなどでUA文字列をヒットさせて、その結果を変数の格納します。

    そして、slickを発火させる際にオプション設定をすると思うのですが、
    以下のように三項演算子でIE11のみオプションを変更させます。

    // slick発火時のオプション設定
$(slideTarget).slick({
     dots: true,
     infinite: true,
     pauseOnHover: true,
     slidesToShow: 1,
     slidesToScroll: 1,
     useCss: isIE ? false : true,
     useTransform: isIE ? false : true,
    });

    useCss、useTransformのオプション設定時にUA判定をした変数を用いて、true、falseを分岐させています。

    そもそもの発生原因

    発生の原因なんですが、大分調べてみましたがどうにもヒットする記事がなく、不明な感じです。

    ただ、

    • ・slickのスライドアニメーションがIE11ではうまく動かない
    • ・IE11でcssのtransform: translate3Dなどがうまく描画されない

    というそれっぽいものはあり、今回はslickのオプションである、useCss、useTransformをfalseにした感じです。

    自分の予想なんですが、
    youtube動画はiframeを使用してyoutubeとの通信が発生するというのが処理的に大分重く、そこでslickのcssがうまく効いてくれないのかなと思いました。

    次回

    この案件は他にも勉強になることがあり、そこもアウトプットしていきたいと思っているので、
    この続編も書いていきたいと思います〜！

    それでは、次回もゆたしく〜〜

    記事一覧に戻る

記事をシェアする