PCのWindowsのみ　safariでcssがずれる

safariでスマホ、ｉＰａｄではちゃんとに形になってるのですが、PCだけフレックスボックスが効かないのと、モーダルが右上になって高さもおかしくなって表示されてしまいます。
これは何か原因ですか？
スマホ、ｉＰａｄ　ではできているのにＰＣだと出来ないことはよくあることなのでしょうか？

<div class="s-2">
	<div class="item">
		<h2>ITEM LIST</h2>
		<ul class="itemList">	
	   <li><img  class="js-modal-open" href="" data-target="modal01" src="img/01.png"></li> 
			 <li><img  class="js-modal-open" href="" data-target="modal02" src="img/bag1.png"></li> 
			<li><img  class="js-modal-open" href="" data-target="modal03" src="img/bag2.png"></li> 
			 <li><img  class="js-modal-open" href="" data-target="modal01" src="img/01.png"></li> 
			<li><img  class="js-modal-open" href="" data-target="modal01" src="img/01.png"></li> 
			 <li><img  class="js-modal-open" href="" data-target="modal01" src="img/01.png"></li> 
		</ul>
	
	</div>

	</div>	
	
	    <div id="modal01" class="modal js-modal">
        <div class="modal__bg js-modal-close"></div>
         <div class="modal_content">
			<img src="img/01.png">
			<div>
		  　　<h3>11111説明</h3>
		　　 <p>テキストテキスト</p>　
				<p>テキストテキスト</p>
				<p>テキストテキスト</p>
				　 <p>テキストテキスト</p>　
				<p>テキストテキスト</p>
				<p>テキストテキスト</p>
				　 <p>テキストテキスト</p>　
				<p>テキストテキスト</p>
				<p>テキストテキスト</p>

				
		　　　<a href="" class="modal-l">リンク</a>
		　　　<input type="button" class="close bt">
		 </div>
			
        </div><!--modal__inner-->
    </div><!--modal-->

 <div id="modal02" class="modal js-modal">
        <div class="modal__bg js-modal-close"></div>
         <div class="modal_content">
			<img src="img/bag1.png">
			<div>
		  　　<h3>22222説明</h3>
		　　 <p>テキストテキスト</p>　
		　　　<a href="" class="modal-l">リンク</a>
		　　　<input type="button" class="close bt">
		 </div>
			
        </div><!--modal__inner-->
    </div><!--modal-->
	
	 <div id="modal03" class="modal js-modal">
        <div class="modal__bg js-modal-close"></div>
         <div class="modal_content">
			<img src="img/bag2.png">
			<div>
		  　　<h3>33333説明</h3>
		　　 <p>テキストテキスト</p>　
		　　　<a href="" class="modal-l">リンク</a>
		　　　<input type="button" class="close bt">
		 </div>
			
        </div><!--modal__inner-->
    </div><!--modal-->

ｊｓ

<script>
$(function(){
    $('.js-modal-open').each(function(){
        $(this).on('click',function(){
            var target = $(this).data('target');
            var modal = document.getElementById(target);
            $(modal).fadeIn();
            return false;
        });
    });
	
	var jsClose = '.js-modal-close';
	var close = '.close';
	
    $(jsClose+","+close).on('click',function(){
        $('.js-modal').fadeOut();
        return false;
    }); 
});

	var hash = window.location.hash ;
	$(hash).fadeIn();
  
</script>

css

ul.itemList{
	list-style: none;
	padding: 0 0;
	display: inline-flex;
	flex-wrap: wrap;
	justify-content:flex-start;
	margin:10px 0;
}
ul.itemList li{
   width: 25%;
   padding:0 5px;	
}
ul.itemList li img{
   width: 100%;	
}

.modal{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
	
}
.modal__bg{
    background: rgba(0,0,0,0.8);
    height: 100vh;
    position: absolute;
    width: 100%;
	z-index: 0;
}
.modal_content{
    background: #fff;
    left: 50%;
    padding: 40px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
   height: 80%;
    width: 80%;
    max-width: 600px;
	 overflow: auto;
}
.modal_content img{
	width:100%;
}
input.bt{
 width: 36px;
 height: 36px;
 background: url(img/close.png) top right no-repeat;
 position:absolute;
 top:1%;
 right: 1%;
	border: none;
 
}
.modal_content div{
	padding: 20px;
}
a.modal-l{
	display:block; 
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
 
::-webkit-scrollbar-thumb {
  background: #8e8e8e;
  border-radius: 5px;
}
::-webkit-scrollbar-track {
  background: #eeeeee;
  border-radius: 5px;
}