Flexbox ДИВ простирания отличается в Chrome и Firefox

Question

У меня странная проблема, у меня есть DIV завернуть другой DIV, структура, как показано ниже:

<div class="col-md-4 view small_img"> 
    <div class="blue"></div> 
</div> 

Я хочу, чтобы, когда я наведите курсор мыши на div.small_img черный блок будет охватывать на синем поэтому я установил его на :after и использовал flexbox и позиционировал.

Все выглядит отлично в Chrome, но когда я переключаюсь на Firefox, я не знаю, почему этот фон не накрыл мой синий блок, а только показал небольшую площадь рядом с ним.

.small_img { 
 
    position: relative; 
 
    overflow: hidden; 
 
    display: -webkit-box; 
 
    /* OLD - iOS 6-, Safari 3.1-6 */ 
 
    display: -moz-box; 
 
    /* OLD - Firefox 19- (buggy but mostly works) */ 
 
    display: -ms-flexbox; 
 
    /* TWEENER - IE 10 */ 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
.small_img:hover:before, 
 
.small_img:hover:after { 
 
    content: ''; 
 
    position: absolute; 
 
} 
 
.small_img:hover:before { 
 
    content: 'view'; 
 
    border: 2px solid hsl(0, 0%, 100%); 
 
    border-radius: 10px; 
 
    line-height: 2em; 
 
    padding: 5px; 
 
    color: white; 
 
    z-index: 5; 
 
} 
 
.small_img:hover:after { 
 
    width: 92.5%; 
 
    height: 92.5%; 
 
    background: hsla(0, 0%, 0%, 0.85); 
 
} 
 
.small_img img { 
 
    height: 100%; 
 
} 
 
.blue { 
 
    background: hsl(220, 100%, 60%); 
 
    width: 300px; 
 
    height: 300px; 
 
    border: 1px solid black; 
 
}

<div id="page-wrapper"> 
 
    <div class="row"> 
 
    <h1 class="page-header center">flexbox hover cover effect</h1> 
 
    <h4 class="center">I want black block cover my blue block</h4> 
 
    <!-- main Content --> 
 
    <div class="row col-md-offset-1 col-md-10"> 
 
     <div class="col-md-4 view small_img"> 
 
     <div class="blue"></div> 
 
     </div> 
 
     <div class="col-md-4 view small_img"> 
 
     <div class="blue"></div> 
 
     </div> 
 
     <div class="col-md-4 view small_img"> 
 
     <div class="blue"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Кто-нибудь знает, что случилось?

Включая мой jsfiddle тоже.

Answer 1

Вы можете исправить это путем установки top и left из .small_img:hover:after - см демо ниже и updated fiddle here.

.small_img { 
 
    position: relative; 
 
    overflow: hidden; 
 
    display: -webkit-box; 
 
    /* OLD - iOS 6-, Safari 3.1-6 */ 
 
    display: -moz-box; 
 
    /* OLD - Firefox 19- (buggy but mostly works) */ 
 
    display: -ms-flexbox; 
 
    /* TWEENER - IE 10 */ 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
.small_img:hover:before, 
 
.small_img:hover:after { 
 
    content: ''; 
 
    position: absolute; 
 
} 
 
.small_img:hover:before { 
 
    content: 'view'; 
 
    border: 2px solid hsl(0, 0%, 100%); 
 
    border-radius: 10px; 
 
    line-height: 2em; 
 
    padding: 5px; 
 
    color: white; 
 
    z-index: 5; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 
.small_img:hover:after { 
 
    width: 92.5%; 
 
    height: 92.5%; 
 
    background: hsla(0, 0%, 0%, 0.85); 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 
.small_img img { 
 
    height: 100%; 
 
} 
 
.blue { 
 
    background: hsl(220, 100%, 60%); 
 
    width: 300px; 
 
    height: 300px; 
 
    border: 1px solid black; 
 
}

<div id="page-wrapper"> 
 
    <div class="row"> 
 
    <h1 class="page-header center">flexbox hover cover effect</h1> 
 
    <h4 class="center">I want black block cover my blue block</h4> 
 
    <!-- main Content --> 
 
    <div class="row col-md-offset-1 col-md-10"> 
 
     <div class="col-md-4 view small_img"> 
 
     <div class="blue"></div> 
 
     </div> 
 
     <div class="col-md-4 view small_img"> 
 
     <div class="blue"></div> 
 
     </div> 
 
     <div class="col-md-4 view small_img"> 
 
     <div class="blue"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>