CSS模糊過濾器打破滾動和懸停

第一次海報 - 我到處尋找解決方案，我希望你們可以幫助！使用CSS模糊過濾器時遇到問題。我創建了一個磨砂玻璃效果（類似於ios7設置菜單效果），以在我的網站上提供疊加效果。我注意到，每當我與其上的一個元素進行交互時，模糊div上的透明div就會中斷（在圖標＃1懸停在可點擊的圖標上）。它還會導致水平線破壞導航覆蓋時的效果，並在滾動中顯示div（photo2）。麻煩似乎與「.blur」div本身，因爲我仍然看到滾動時的相同行爲，當我刪除「.overview_text」文本透明覆蓋。這是Webkit過濾器本身的錯誤，還是我做錯了什麼？任何想法可能會導致這種情況，以及如何防止它發生？提前致謝。CSS模糊過濾器打破滾動和懸停

此搜索：http://cl.ly/image/2v3p3P0r3d1y 鏡像2：http://cl.ly/image/2H091L2l1K2c

相關html.erb

<div class="plan_overview span10 offset1"> 
    <%= image_tag plan.cover_photo, class: "panzoom-elements" %> 
    <div class="blur span3"> 
    <%= image_tag plan.cover_photo %> 
    </div> 
<div class= "overview_text span3"> 
    ...took out content code here... 
</div>

css.scss文件

.plan_overview { 
    height: 400px; 
    background: $gray; 
    z-index: 2; 
    margin-top:10px; 
    margin-bottom: 20px; 
    overflow: hidden; 
    border: 1px solid #979797; 
    img{ 
    position:absolute; 
    overflow: hidden; 
    } 
} 
.blur{ 
    position: absolute; 
    @include box_sizing; 
    z-index: 2; 
    height: 400px; 
    width: 300px; 
    margin-left:0px; 
    padding:0; 
    background-color: white; 
    img{ 
    z-index: 2; 
    position: absolute; 
    height:420px; 
    width: 350px; 
    left: 0; 
    margin: -1px; 
    overflow: hidden; 
    filter: blur(30px); 
     -webkit-filter: blur(30px); 
     -moz-filter: blur(30px); 
     -o-filter: blur(30px); 
     -ms-filter: blur(30px); 
    } 
} 

.overview_text { 
    background: rgb(250, 250, 250); /* Fall-back for browsers that don't support rgba */ 
    background: rgba(240, 240, 240, .5); 
    position: absolute; 
    margin-left: 0; 
    border-right: 1px solid #979797; 
    z-index: 10; 
    padding: 5px; 
    color: white; 
    font-family: AvenirNextCondensed-Regular; 
    word-break: normal; 
    word-wrap: break-word;  /* IE */ 
    height: 400px; 
    width: 300px; 
    font-size: 18px; 
    line-height: 25px; 
    float: left; 
    .title { 
    z-index: 301; 
    font-family: AvenirNextCondensed-Bold; 
    font-size: 20px; 
    line-height: 27px; 
    } 
}

來源

2013-10-23 scottier

對於任何需要未來解決方案的人來說，我可以通過強制硬件加速來解決這個問題。添加到我的.blur css：

-webkit-transform: translate3d(0,0,0); 
-moz-transform: translate3d(0,0,0); 
-ms-transform: translate3d(0,0,0); 
-o-transform: translate3d(0,0,0); 
transform: translate3d(0,0,0);

來源

2013-10-25 01:14:06 scottier

只是fyi - 這不再可靠GPU加速了iOS6的內容 –

+1 scottier事實上，這在某些情況下可以解決掉眼淚。無論這是否是一個解決方案，我沒有做足夠的盡職調查。然而，事實上這確實解決了我已經測試的這一點。 – origin1tech

我無法用Chrome 30重現這個問題。我用你的代碼，它工作正常：http://cdpn.io/ilgsJ

也許你可以發佈codepen或JSFiddler？

CSS過濾器仍然是實驗性的，並且很有可能無法按照它的方式工作。除非你的目標是實驗，否則現在就避免它。

來源

2013-10-24 02:55:41

好吧，我可能會改變那方面的設計。 Fyi，今天突然工作了一個小時左右，然後再次爆發......讓我的希望之路再次破滅。感謝您的建議！ – scottier

如果您發佈codepen或JSFiddler，它會更容易幫助。並不總是與過濾器直接相關的問題，而是其他屬性，如面罩剪裁或任何其他實驗屬性。 –

CSS模糊過濾器打破滾動和懸停

回答

相關問題