レンダリングでCSS3が奇妙な動作をする

Question

ユーザーが列の上にカーソルを置いたときに1px線が異なる解像度で表示されます。 IE11（ホバー上）、Edge（ホバー上）、Firefox（コラム間でホバーするとちらつき）、Chrome（センター）ブラウザで、多分他のユーザーにも起こります。ソースコードは以下の通りです。前もって感謝します。私が見ることができるものから、

/* reset css*/ 
 
*{ 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t border: 0; 
 
\t font-size: 100%; 
 
\t font: inherit; 
 
\t vertical-align: baseline; 
 
} 
 

 
.section{ 
 
\t display:flex; 
 
\t flex-flow:row nowrap; 
 
    \t justify-content:center; 
 
} 
 

 
.section .column{ 
 
\t width:25%; 
 
\t overflow:hidden; 
 
\t position:relative; 
 
} 
 

 
.section .wrapper{ 
 
\t width:100%; 
 
\t height:50%; 
 
\t padding:12.5% 7.5% 0 7.5%; 
 
\t box-sizing:border-box; 
 
\t background:rgba(0,0,0,0.4); 
 
    \t cursor:pointer; 
 
    \t position:absolute; 
 
    \t bottom:0; 
 
    \t left:0; 
 
    \t right:0; 
 
} 
 

 
.section .bg{ 
 
    \t width:100%; 
 
\t height:100vh; 
 
\t transition:all 2s ease; 
 
\t backface-visibility: hidden; 
 
\t background:url(https://cdn.colorlib.com/wp/wp-content/uploads/sites/2/iPhone6_With_iPad_PSD_template.png) center center/cover no-repeat; 
 
} 
 

 
.section .column:hover .bg{ 
 
\t transform:scale3d(1.3,1.3,1.3); 
 
}

<div class="section"> 
 
\t <div class="column"> 
 
\t \t <div class="bg"></div> 
 
\t \t <div class="wrapper">Some text</div> 
 
\t </div> 
 
\t <div class="column"> 
 
\t \t <div class="bg"></div> 
 
\t \t <div class="wrapper">Some text</div> 
 
\t </div> 
 
\t <div class="column"> 
 
\t \t <div class="bg"></div> 
 
\t \t <div class="wrapper">Some text</div> 
 
\t </div> 
 
\t <div class="column"> 
 
\t \t <div class="bg"></div> 
 
\t \t <div class="wrapper">Some text</div> 
 
\t </div> 
 
</div>

On Chrome 57.0.2987.133

On Microsoft Edge 38.14393.1066.0

Answer 1

追加ラッパー<div class="container">を追加し、テーブルを表示するには、変更はすべてのブラウザで問題を修正したようです。

/* reset css*/ 
 
*{ 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t border: 0; 
 
\t font-size: 100%; 
 
\t font: inherit; 
 
\t vertical-align: baseline; 
 
} 
 

 
.section{ 
 
\t width:100%; 
 
\t display:table; 
 
} 
 

 
.section .column{ 
 
\t width:25%; 
 
\t height:100vh; 
 
\t display:table-cell; 
 
} 
 

 
.section .container{ 
 
\t width:100%; 
 
    height:100%; 
 
\t overflow:hidden; 
 
\t position:relative; 
 
} 
 

 
.section .wrapper{ 
 
\t width:100%; 
 
\t height:50%; 
 
\t padding:12.5% 7.5% 0 7.5%; 
 
\t box-sizing:border-box; 
 
\t background:rgba(0,0,0,0.4); 
 
    cursor:pointer; 
 
    position:absolute; 
 
    bottom:0; 
 
    left:0; 
 
    right:0; 
 
} 
 

 
.section .bg{ 
 
\t position:absolute; 
 
    width:101%; /*firefox fix*/ 
 
    height:100%; 
 
    transition:all 2s ease; 
 
    z-index:-1; 
 
    background:url(https://cdn.colorlib.com/wp/wp-content/uploads/sites/2/iPhone6_With_iPad_PSD_template.png) center center/cover no-repeat; 
 
} 
 

 
.section .column:hover .bg{ 
 
\t transform:scale3d(1.3,1.3,1.3); 
 
}

<div class="section"> 
 
\t <div class="column"> 
 
\t \t <div class="container"> 
 
\t \t \t <div class="bg"></div> 
 
\t \t \t <div class="wrapper">Some text</div> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="column"> 
 
\t \t <div class="container"> 
 
\t \t \t <div class="bg"></div> 
 
\t \t \t <div class="wrapper">Some text</div> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="column"> 
 
\t \t <div class="container"> 
 
\t \t \t <div class="bg"></div> 
 
\t \t \t <div class="wrapper">Some text</div> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="column"> 
 
\t \t <div class="container"> 
 
\t \t \t <div class="bg"></div> 
 
\t \t \t <div class="wrapper">Some text</div> 
 
\t \t </div> 
 
\t </div> 
 
</div>

Answer 2

、問題が隠されて背面-visbilityになりそうです。 Chromeで問題を再現し、背面の視認性を削除できました。

.section .bg{ 
    ... 
    backface-visibility: hidden; 
    ... 
}