jquery - jQuery fotorama 3.0.8 が IE11 での初期化中にすべての内部コンテンツを div から削除するのはなぜですか?

Question

スライドの画像を含む単純な html があります。

<div id="looped-fotorama">    
<div>
        <img src="/templates/images/04.png">
    </div>

    <div>
        <img src="/templates/images/07.png">
    </div>

    <div>
        <img src="/templates/images/03.png">
    </div>

    <div> <img src="/templates/images/02.png"></div>
</div>

fotorama プラグインを有効にするためにこれを呼び出すと、

$("#looped-fotorama").fotorama();

私はこれを得る

<div class="fotorama fotorama_horizontal fotorama_shadows fotorama_csstransitions fotorama_loading" id="looped-fotorama" style="min-width: 0px;" data-auto="false">
   <div class="fotorama__wrap fotorama__wrap_style_touch">
      <div class="fotorama__noise"></div>
      <div class="fotorama__shaft" style="transform: translate(0px, 0px); transition-duration: 0ms;">
         <div class="fotorama__state" style="opacity: 1;">
            <div class="spinner" style="left: 16px; top: 16px; width: 0px; position: relative; z-index: 2000000000;" aria-role="progressbar">
               <div style="animation:opacity-100-25-0-12 1s linear infinite; top: -1px; position: absolute; opacity: 0.25;">
                  <div style="background: rgb(128, 128, 128); transform-origin: left 50%; border-radius: 1px; width: 10px; height: 2px; position: absolute; box-shadow: 0px 0px 1px rgba(0,0,0,0.1); transform: rotate(15deg) translate(6px, 0px);"></div>
               </div>
               <div style="animation:opacity-100-25-1-12 1s linear infinite; top: -1px; position: absolute; opacity: 0.25;">
                  <div style="background: rgb(128, 128, 128); transform-origin: left 50%; border-radius: 1px; width: 10px; height: 2px; position: absolute; box-shadow: 0px 0px 1px rgba(0,0,0,0.1); transform: rotate(45deg) translate(6px, 0px);"></div>
               </div>
               <div style="animation:opacity-100-25-2-12 1s linear infinite; top: -1px; position: absolute; opacity: 0.25;">
                  <div style="background: rgb(128, 128, 128); transform-origin: left 50%; border-radius: 1px; width: 10px; height: 2px; position: absolute; box-shadow: 0px 0px 1px rgba(0,0,0,0.1); transform: rotate(75deg) translate(6px, 0px);"></div>
               </div>
               <div style="animation:opacity-100-25-3-12 1s linear infinite; top: -1px; position: absolute; opacity: 0.25;">
                  <div style="background: rgb(128, 128, 128); transform-origin: left 50%; border-radius: 1px; width: 10px; height: 2px; position: absolute; box-shadow: 0px 0px 1px rgba(0,0,0,0.1); transform: rotate(105deg) translate(6px, 0px);"></div>
               </div>
               <div style="animation:opacity-100-25-4-12 1s linear infinite; top: -1px; position: absolute; opacity: 0.25;">
                  <div style="background: rgb(128, 128, 128); transform-origin: left 50%; border-radius: 1px; width: 10px; height: 2px; position: absolute; box-shadow: 0px 0px 1px rgba(0,0,0,0.1); transform: rotate(135deg) translate(6px, 0px);"></div>
               </div>
               <div style="animation:opacity-100-25-5-12 1s linear infinite; top: -1px; position: absolute; opacity: 0.25;">
                  <div style="background: rgb(128, 128, 128); transform-origin: left 50%; border-radius: 1px; width: 10px; height: 2px; position: absolute; box-shadow: 0px 0px 1px rgba(0,0,0,0.1); transform: rotate(165deg) translate(6px, 0px);"></div>
               </div>
               <div style="animation:opacity-100-25-6-12 1s linear infinite; top: -1px; position: absolute; opacity: 0.25;">
                  <div style="background: rgb(128, 128, 128); transform-origin: left 50%; border-radius: 1px; width: 10px; height: 2px; position: absolute; box-shadow: 0px 0px 1px rgba(0,0,0,0.1); transform: rotate(195deg) translate(6px, 0px);"></div>
               </div>
               <div style="animation:opacity-100-25-7-12 1s linear infinite; top: -1px; position: absolute; opacity: 0.25;">
                  <div style="background: rgb(128, 128, 128); transform-origin: left 50%; border-radius: 1px; width: 10px; height: 2px; position: absolute; box-shadow: 0px 0px 1px rgba(0,0,0,0.1); transform: rotate(225deg) translate(6px, 0px);"></div>
               </div>
               <div style="animation:opacity-100-25-8-12 1s linear infinite; top: -1px; position: absolute; opacity: 0.25;">
                  <div style="background: rgb(128, 128, 128); transform-origin: left 50%; border-radius: 1px; width: 10px; height: 2px; position: absolute; box-shadow: 0px 0px 1px rgba(0,0,0,0.1); transform: rotate(255deg) translate(6px, 0px);"></div>
               </div>
               <div style="animation:opacity-100-25-9-12 1s linear infinite; top: -1px; position: absolute; opacity: 0.25;">
                  <div style="background: rgb(128, 128, 128); transform-origin: left 50%; border-radius: 1px; width: 10px; height: 2px; position: absolute; box-shadow: 0px 0px 1px rgba(0,0,0,0.1); transform: rotate(285deg) translate(6px, 0px);"></div>
               </div>
               <div style="animation:opacity-100-25-10-12 1s linear infinite; top: -1px; position: absolute; opacity: 0.25;">
                  <div style="background: rgb(128, 128, 128); transform-origin: left 50%; border-radius: 1px; width: 10px; height: 2px; position: absolute; box-shadow: 0px 0px 1px rgba(0,0,0,0.1); transform: rotate(315deg) translate(6px, 0px);"></div>
               </div>
               <div style="animation:opacity-100-25-11-12 1s linear infinite; top: -1px; position: absolute; opacity: 0.25;">
                  <div style="background: rgb(128, 128, 128); transform-origin: left 50%; border-radius: 1px; width: 10px; height: 2px; position: absolute; box-shadow: 0px 0px 1px rgba(0,0,0,0.1); transform: rotate(345deg) translate(6px, 0px);"></div>
               </div>
            </div>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
               <g fill="none" stroke="#808080" stroke-width="2">
                  <circle cx="16" cy="16" r="13" />
                  <line x1="7" y1="7" x2="25" y2="25" />
               </g>
            </svg>
         </div>
         <div class="fotorama__frame fotorama__frame_active" style="visibility: hidden;">
            <div></div>
         </div>
         <div class="fotorama__frame" style="visibility: hidden;">
            <div></div>
         </div>
         <div class="fotorama__frame" style="visibility: hidden;">
            <div></div>
         </div>
         <div class="fotorama__frame" style="visibility: hidden;">
            <div></div>
         </div>
      </div>
      <i class="fotorama__arr fotorama__arr_prev fotorama__arr_disabled">?</i><i class="fotorama__arr fotorama__arr_next">?</i>
   </div>
   <div class="fotorama__thumbs fotorama__thumbs_previews" style="height: 56px; visibility: hidden;">
      <div class="fotorama__thumbs-shaft" style="transform: translate(0px, 0px); transition-duration: 0ms;">
         <i class="fotorama__thumb-border" style="border-width: 2px; top: 4px; width: 44px; height: 44px; display: inline; transform: translate(0px, 0px); transition-duration: 0ms;"></i>
         <div class="fotorama__thumb fotorama__thumb_selected" style="margin: 4px; width: 48px; height: 48px;">
            <canvas width="48" height="48" class="fotorama__thumb__img" style="width: 48px; height: 48px; visibility: visible;"></canvas>
         </div>
         <div class="fotorama__thumb" style="margin: 4px; width: 48px; height: 48px;">
            <canvas width="48" height="48" class="fotorama__thumb__img" style="width: 48px; height: 48px; visibility: visible;"></canvas>
         </div>
         <div class="fotorama__thumb" style="margin: 4px; width: 48px; height: 48px;">
            <canvas width="48" height="48" class="fotorama__thumb__img" style="width: 48px; height: 48px; visibility: visible;"></canvas>
         </div>
         <div class="fotorama__thumb" style="margin: 4px; width: 48px; height: 48px;">
            <canvas width="48" height="48" class="fotorama__thumb__img" style="width: 48px; height: 48px; visibility: visible;"></canvas>
         </div>
      </div>
   </div>
</div>

クラス「fotorama__frame」のブロックが空であることに気付きました。IE10 (または Google Chrome) では、このブロックを img タグで取得します。

div のすべての内部コンテンツが削除されるのはなぜですか?

Answer 1

ここでの問題は、ユーザー エージェント スニッフィングに関与する Fotorama 3.0.8 にあります。Internet Explorer 11 は実際には Firefox 11 であると考えています。その結果、間違ったベンダー プレフィックスなどを適用している可能性があります。これは、Web 開発で (一般的に言えば) ユーザー エージェント文字列をスニッフィングしてはならない理由の良い例です。

var b = /(chrome)[ \/]([\w.]+)/.exec(a) 
     || /(webkit)[ \/]([\w.]+)/.exec(a) 
     || /(opera)(?:.*version|)[ \/]([\w.]+)/.exec(a) 
     || /(msie) ([\w.]+)/.exec(a) 
     || a.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec(a) 
     || [];

Internet Explorer 11 では、これにより

var b = ["mozilla/5.0 (windows nt 6.3; ... rv:11.0", "mozilla", "11.0"]

Fotorama 4.4.8+ にアップグレードすると、問題が解決するはずです。新しいバージョンは Internet Explorer 11 を正しく識別し、適切なコンテンツを提供しているようです。

最新版： http: //fotorama.io/