CSS3奇怪的行爲與渲染

當用戶懸停在列上時，1px行出現在不同的解決方案上。它發生在IE11（懸停），Edge（懸停），Firefox（在列間懸停時閃爍）和Chrome（在中心）瀏覽器上，也可能在其他瀏覽器上。源代碼是波紋管和附加的圖像。提前致謝。CSS3奇怪的行爲與渲染

/* 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

來源

2017-04-16 mantisltu

檢查：懸停聲明。它沒有有效的CSS。 – Felix

我改爲.section .column .bg：hover {transform：scale（1.3）;}但問題仍然存在 – mantisltu

添加附加包裝<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>

來源

2017-04-17 15:11:14 mantisltu

從我所看到的，這個問題看起來是背面，visbility被隱藏。我能夠在Chrome中重現您的問題，並移除背景知名度：隱藏的固定它。

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

來源

2017-04-16 21:44:20 pbarrasso

謝謝。它似乎在Chrome上運行良好，但不同的瀏覽器仍然有這個問題。 – mantisltu

CSS3奇怪的行爲與渲染

回答

相關問題