ファイヤーフォックスでは機能しますがChromeでは機能しません。

Question

カードには、ユーザーが移動すると「プラスアイコン」が表示されます。しかし、「プラス」アイコンはfirefox（ファイアウォールでは44.0.2でテスト済み）を中心に垂直に配置されていますが、Chrome上で動作していません（chrome 48.0でテスト済み）。

Jsfiddleを開いてfirefoxで開き、chromeを押してカードをホバーすると、 "Plus"アイコンがクロムに​​垂直に整列していないことがわかります。なぜ私は理解できません。

Jsfiddle demo

HTML

<div class="center jumbotron"> 

    <div id="deal-zone"> 
    <ul class="cards-list"> 

     <li class="card 353"> 

     <div class="card-content"> 

      <div class="info-overlay"> 
      <div class="close-overlay"> 
       <a>close</a> 
      </div> 
      some info some longer info and this is really long now i wonder how long it can get 

      </div> 

      <div class="card-image"> 
      <a href="/operations/thisiscool"></a> 
      <figure> 
       <a href="/operations/thisiscool"> 
       <img style="opacity: 1; display: block;" id="HPImageBanner_353" src="http://vp-eu.scene7.com/is/image/vpeu/0/00_54093_FR_brandvisualnbrandvisualfr"> 

       <!-- operation card's short details on 2-column view--> 
       </a> 
       <figcaption id="tek" class="card-short-info"> 
       <a href="/operations/la-semaine-de-la-beaute-a-paris-111"></a> 
       <a class="moreInfo" id="BtnHomeOperationExpand_5331345" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo"> 

        <i class="plusbutton glyphicon glyphicon-plus detail-icon_353"></i> 
       </a> 

       <div class="short-info-content"> 
        <a id="dateSales_53120" class="dateSales _saleLink" href="/operations/la-semaine-de-la-beaute-a-paris-111">Jusqu'au <span class="outstandingwords">12 novembrex</span></a> 
       </div> 



       </figcaption> 
      </figure> 
      </div> 

     </div> 
     <div id="collapseTwo" class="collapse left-aligned" role="tabpanel" aria-labelledby="headingTwo"> 
      <div class="infoSales"> 
      <a id="info" class="moreInfo"></a> 
      this is the big details i want 
      </div> 

     </div> 


     </li> 
     <!-- cards in the stream of deal --> 


    </ul> 


    </div> 

</div> 

CSS

.info-overlay { 
    display: none; 
    z-index: 999; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    background-color: grey; 
} 

.close-overlay { 
    float: right; 
    padding: 5px; 
} 

#deal-zone { 
    margin-top: 20px; 
} 

#deal-zone ul { 
    padding: 0; 
} 

.cards-list { 
    list-style: none; 
    display: block; 
    height: auto; 
} 

.card { 
    width: 47%; 
    display: inline-block; 
    margin: 0 1% 21px 1%; 
} 

.card-content { 
    background: #fff; 
    position: relative; 
} 

.card-image { 
    vertical-align: top; 
    position: relative; 
    line-height: 0; 
    overflow: hidden; 
    padding-bottom: 33.88%; 
} 

.card-image img { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    color: red; 
} 

.container .jumbotron { 
    padding-left: 0px; 
    padding-right: 0px; 
} 

.card-short-info { 
    width: 100%; 
    height: 30%; 
    position: absolute; 
    color: #464650; 
    padding: 0px 1em; 
    font-size: 0.8em; 
    background-color: grey; 
    bottom: 0; 
    display: none; 
} 

.moreInfo { 
    position: relative; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
    float: right; 
    font-size: 16px; 
    line-height: normal; 
    color: #464650; 
} 

.short-info-content { 
    position: relative; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
    text-align: left; 
} 

.card-short-info a.dateSales { 
    color: #464650; 
} 

.card-long-info { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    color: #464650; 
    padding: 0px 1em; 
    font-size: 0.8em; 
    background-color: grey; 
    bottom: 0; 
    display: none; 
} 

Javascriptを

$(".card-image").hoverIntent({ 
    sensitivity: 100, //sensitivity threshold (must be 1 or higher)  
    interval: 100, //milliseconds for onMouseOver polling interval  
    timeout: 100, //milliseconds delay before onMouseOut  
    over: function() { 
    $('.card-short-info', this).slideToggle(100); 
    }, 
    out: function() { 
    $('.card-short-info', this).slideToggle(300); 


    } 
}); 

$(".close-overlay").click(function(e) { 
    e.preventDefault(); 
    $(this).closest('.card-content').find(".info-overlay").hide(); 
}); 

$(".plusbutton").click(function(e) { 
    e.preventDefault(); 
    $(this).closest('.card-content').find(".info-overlay").show(); 
}); 

Answer 1

私は、リンク上のあなたのtop: 50%は、相対的な位置付けのために動作しておらず、親の高さが固定されていないと考えています。

はよくやっ

.moreInfo { 
    position: absolute; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
font-size: 16px; 
line-height: normal; 
color: #464650; 
}