IE 11のTransform + positioning問題

Question

私は位置があります：ブートストラップがtransform：translateルールを適用したモーダルでfixed divです。これはFFとChromeで正常に動作しますが、IEで正しく表示されない11.あなたは問題が見ることができる。ここ

：スクロールで適用

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'); 
.modal-open .modal { 
    //overflow: hidden; 
} 
.modal-body { 
    height: calc(100vh); 
    overflow-y: scroll; 
} 

#getFixed { 
    position: relative; 
    left: 10px; 
    width: 500px; 
} 

とjQuery：http://jsfiddle.net/roahda03/23/

これは、CSSです

jQuery(function($) { 
    function fixDiv() { 
    var $cache = $('#getFixed'); 
    if ($('.modal-body').scrollTop() > 50) 
    { 
    $cache.css({ 
     'position': 'fixed', 
     'top': '0px', 
     'left': '25px', 
     'width': '500px' 
     }); 
    } 
    else 
     $cache.css({ 
     'position': 'relative', 
     'top': 'auto', 
     'left': '10px' 
     }); 
    } 
    $('.modal-body').scroll(fixDiv); 
    fixDiv(); 
}); 

編集：これはa bugと思われます。私の質問は、これをどのように解決できるかです。

Answer 1

私は素晴らしい解決策を見つけました。

• 使用ブラウザがIE
• ある場合getFixed id要素

この作業のoffset().leftによって残さCSSを交換モーダルビュー上部のoffset().top

によってCSS上部を交換検出すべての上で細かいIEブラウザとその他。してみてください。 http://jsfiddle.net/0Lue2rsp/

$('.launchConfirm').on('click', function (e) { 
 
    $('#confirm').modal({ 
 
     show: true 
 
    }); 
 
}); 
 

 
// variable for check if IE detected 
 
var IfIE = false; 
 

 
//Check if IE used 
 
var ua = window.navigator.userAgent; 
 
var msie = ua.indexOf("MSIE "); 
 

 
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) 
 
{ 
 
    IfIE = true; 
 
} 
 
else 
 
{ 
 
    IfIE = false; 
 
} 
 

 

 
jQuery(function($) { 
 
    function fixDiv() { 
 
    var $cache = $('#getFixed'); 
 
    if ($('.modal-body').scrollTop() > 50) 
 
    { 
 
    \t if(IfIE == true){ 
 
     
 
     \t \t $cache.css({ 
 
      'position': 'fixed', 
 
      'top': $(".modal-content").offset().top, 
 
      'left':$("#getFixed").offset().left, 
 
      'width': '500px' 
 
     }); 
 
     }else{ 
 
     \t $cache.css({ 
 
      'position': 'fixed', 
 
      'top': '0', 
 
      'left':'25px', 
 
      'width': '500px' 
 
     }); 
 
     } 
 
    } 
 
    else 
 
     $cache.css({ 
 
     'position': 'relative', 
 
     'top': 'auto', 
 
     'left': '10px' 
 
     }); 
 
    } 
 
    $('.modal-body').scroll(fixDiv); 
 
    fixDiv(); 
 
}); 
 

 

 

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'); 
 
.modal-open .modal { 
 
    //overflow: hidden; 
 
} 
 
.modal-body { 
 
    height: calc(100vh); 
 
    overflow-y: scroll; 
 
} 
 
    
 
#getFixed { 
 
    position: relative; 
 
    left: 10px; 
 
    width: 500px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
 

 

 
<div class="page-container"> 
 
    <div class="container"> 
 
     <br /> 
 
     <button type="button" class="btn launchConfirm">Open modal</button> 
 
    </div> 
 
</div> 
 
<div class="modal fade" id="confirm"> 
 
    <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
      <div class="modal-body" id="confirm2"> 
 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> 
 
       </button> 
 
       <h4 class="modal-title">Modal title</h4> 
 
       <div id="getFixed" style="background-color:red">This div should be fixed<br>in the modal, not outside it.</div> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
       <p>One fine body&hellip;</p> 
 
      </div> 
 
      <div class="modal-footer"> 
 
       some random buttons 
 
      </div> 
 
     </div> 
 
     <!-- /.modal-content --> 
 
    </div> 
 
    <!-- /.modal-dialog --> 
 
</div> 
 
<!-- /.modal -->

：

は私もバイオリンを作る持っています