如何在使用css轉換時刪除閃爍行：scale？

我一直試圖刪除這個醜陋的閃爍時，懸停在圖像上。我已經嘗試在懸停元素中添加-webkit-backface-visibility: hidden;以及：懸停本身，但似乎無法動搖它。似乎只有在Chrome和Safari上纔會出現這個問題。網站：http://best-law-firm-sites.com/lawpromo12/如何在使用css轉換時刪除閃爍行：scale？

.col-sm-4 { 
 
    width: 33.3333%; 
 
    float: left; 
 
} 
 
.panel-wrap { 
 
    height: 100% !important; 
 
} 
 
.panel-wrap .col-sm-4 { 
 
    padding: 0; 
 
} 
 
.hovereffect { 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
    position: relative; 
 
    cursor: default; 
 
} 
 
.hovereffect .overlay { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    overflow: hidden; 
 
    top: 0; 
 
    left: 0; 
 
    -webkit-transition: all 0.4s ease-in-out; 
 
    -moz-transition: all 0.4s ease-in-out; 
 
    -o-transition: all 0.4s ease-in-out; 
 
    transition: all 0.4s ease-in-out; 
 
} 
 
.hovereffect h2, 
 
.hovereffect img { 
 
    -webkit-transition: all 0.5s ease-in-out; 
 
    -moz-transition: all 0.5s ease-in-out; 
 
    -o-transition: all 0.5s ease-in-out; 
 
    transition: all 0.5s ease-in-out; 
 
} 
 
.hovereffect img { 
 
    display: block; 
 
    position: relative; 
 
    -webkit-transform: scale(1.001); 
 
    -ms-transform: scale(1.001); 
 
    -moz-transform: scale(1.001); 
 
    -o-transform: scale(1.001); 
 
    transform: scale(1.001); 
 
} 
 
.hovereffect:hover img { 
 
    -webkit-transform: scale(1.17); 
 
    -ms-transform: scale(1.17); 
 
    -moz-transform: scale(1.17); 
 
    -o-transform: scale(1.17); 
 
    transform: scale(1.17); 
 
} 
 
.hovereffect h2 { 
 
    bottom: 10%; 
 
    color: #fff; 
 
    font-size: 30px; 
 
    font-weight: 700; 
 
    padding: 10px 10px 10px 17px; 
 
    position: absolute; 
 
    text-align: left; 
 
    text-shadow: 2px 3px 6px rgba(0, 0, 0, 1); 
 
    text-transform: uppercase; 
 
} 
 
.hovereffect h2::after { 
 
    display: block; 
 
    content: ""; 
 
    height: 4px; 
 
    width: 75px; 
 
    background: #BCA474; 
 
    margin: 20px 0 0; 
 
    box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.6); 
 
} 
 
.hovereffect a.info { 
 
    display: inline-block; 
 
    text-decoration: none; 
 
    padding: 7px 14px; 
 
    text-transform: uppercase; 
 
    color: #fff; 
 
    margin: 50px 0 0 0; 
 
    background-color: transparent; 
 
    -webkit-transform: scale(1.5); 
 
    -ms-transform: scale(1.5); 
 
    transform: scale(1.5); 
 
    -webkit-transition: all 0.4s ease-in-out; 
 
    transition: all 0.4s ease-in-out; 
 
    font-weight: normal; 
 
    height: 100%; 
 
    width: 85%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    padding: 70px; 
 
} 
 
.hovereffect:hover a.info { 
 
    -webkit-transform: scale(1); 
 
    -ms-transform: scale(1); 
 
    transform: scale(1); 
 
}

<div class="col-sm-4 panel-1"> 
 
<div class="hovereffect"> 
 
     <img class="img-responsive" src="http://best-law-firm-sites.com/lawpromo12/wp-content/uploads/2016/02/panel1.jpg" alt=""> 
 
     <div class="overlay"> 
 
      <h2>Family Law</h2> 
 
      <a class="info" href="services/family-law/"></a> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="col-sm-4 panel-2"> 
 
<div class="hovereffect"> 
 
     <img class="img-responsive" src="http://best-law-firm-sites.com/lawpromo12/wp-content/uploads/2016/02/panel.jpg" alt=""> 
 
     <div class="overlay"> 
 
      <h2>Estate Planning</h2> 
 
      <a class="info" href="services/estate-planning/"></a> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="col-sm-4 panel-2"> 
 
<div class="hovereffect"> 
 
     <img class="img-responsive" src="http://best-law-firm-sites.com/lawpromo12/wp-content/uploads/2016/02/panel.jpg" alt=""> 
 
     <div class="overlay"> 
 
      <h2>Wills & Trusts</h2> 
 
      <a class="info" href="services/wills-trusts/"></a> 
 
     </div> 
 
    </div> 
 
    </div>

來源

2016-02-23 Paolo Giuliani

我在這個測試Chrome和Firefox在Windows 10上，並且不能重新創建這個 ...您正在測試什麼瀏覽器/操作系統組合？ – misterManSam

我看不到您所指的閃爍，您是否使用較舊的操作系統/瀏覽器？ – Tristan

當在堆棧溢出中查看片段時，我在Windows 7上的Chrome中看到一條奇怪的線條，但在鏈接到的演示網站上沒有。 – Charlie

我已經使用背面的知名度劈到瀏覽器誘騙使用3D管道時遇到類似的奇怪行爲過去。還有其他的方法來「欺騙」瀏覽器到使用3D管道，如：

.class{ 
    transform: translate3d(0,0,1); 
}

來源

2016-02-23 00:54:40 Charlie

爲什麼它應該是一個評論？ – Charlie

我重新創建了問題，正如我留下的評論中指出的那樣。 '你可以試試'是一個很好的答案，因爲它在過去爲我解決了這個問題。 – Charlie

當原始問題的形式是「我在做這件黑客未定義的事情」時，很難回答'我確信這個其他黑客不會出現相同的未定義行爲' – Charlie

可以解決這個問題，通過增加transform規模屬性，以1.001：

.hovereffect img{transform: scale(1.001);}

來源

2016-02-23 02:17:52

仍然沒有設法使其工作。： - / –

如何在使用css轉換時刪除閃爍行：scale？

回答

相關問題