Bir filtrenin, taşma gizli olsa bile sınırlardan kaçmasına izin veren bir Safari hatası çevresinde nasıl çalışırım?

Question

Görüntüyü bulanıklaştırmak için CSS filtresi kullanmaya çalışıyorum. Tüm tarayıcılarda, bulanıklaştırma filtresi, bulanıklığı (beklenen) ayarladığınız değer ne olursa olsun, görüntünün sınırlarının dışına çıkan bulanıklıkla sonuçlanır. Ancak kenarların tanımlanmasını istiyorum (ve görüntüde kutu gölgesi var), bu yüzden görüntüyü overflowhidden olarak ayarlayarak başka bir div ile sardım. Bu, tüm tarayıcılarda çalışır. Bununla birlikte, bazı uygulamaya özel kısıtlamalar nedeniyle, yükleyicinin boyutunu yüklenen ve yeniden boyutlandırılan JavaScript ile güncellemem gerekiyor. Bu, Safari dışındaki tüm tarayıcılarda çalışır. Sarmalayıcı elemanın boyutunu değiştirmek, filtrenin sargının sınırlarından kaçmaya başladığı bir boyama hatasını rastgele tetikler. Her zaman değil, ama MobileSafari ve/veya DOM'ın büyüklüğüne dayanarak olabilir. Küçük bir demo ile

. Safari'yi kullanarak, pencereyi tekrar tekrar boyutlandırın ve hatayı tetikleyeceksiniz. Bazen kendini yeniden çizer ve tamir eder, bazen olmaz. (Chrome kullanın ya da Firefox ve iyi çalışacaktır.)

(Screenshot of the blur escaping the wrapper.)

Onların değiştirdiğinizde bu keman aksine uygulamada sadece, yeni genişlik ve yüksekliği kuruyorum unutulmamalıdır

ve Safari, yeniden boyutlandırma olayı sırasında genişlik ve yükseklik ayarlanmıyorken bile bulanıklıktan kaçma ile kaçma arasında dalgalanma gösterir. (Çalışmamış) denedim

şeyler: resize olayı clearTimeout/setTimeout

unsetting kullanarak ve üzerinde overflow: hidden sıfırlama işlemi tamamlanana kadar

• sarıcı genişliğinin hesaplama ve ayar geciktirme sarıcı ve
• (ve görüntü üzerinde ve üst elemanı üzerine) shenanigans Tüm türlü window.getComputedStyle(wrapper) çağrılması boyutunu
• değiştirdikten sonra JavaScript görüntü hem Sargıyı bir kompozit elemana (ör. , görüntü akışının bulanıklığına neden olan translateZ(0) dönüştürür), ancak yeterli değil. (Screenshot.) Dönüşümü devre dışı bırakmak için bir zamanlayıcı ayarlamak, sayfayı tam bulanıklık kaçışına döndürür. 2/5/10 adedi (Evet, çaresizim)

piksel değerleri yuvarlama yerine object.style.width/height

daha document.styleSheets[x].cssRules[x].style.setProperty() ile genişlik ve yükseklik ayarlama sargı

üzerinde white-space: nowrap ayarlama

Şu anda takılıyorum ve sağlayabileceğiniz her türlü yardımı çok takdir ediyorum. Teşekkür ederim!

Answer 1

özellikle şu an JS koduyla aynı etkiye sahip olacak CSS içinde sarmalayıcıya bir sıvı width verebilir ve bu Hatanızı düzeltmek olabilir, ayrıca max-width

#image_wrapper { 
 
    overflow: hidden; 
 
    margin: 30px auto; 
 
    box-shadow: rgba(0, 0, 0, 0.5) 0 5px 14px; 
 
    width:95% /* whatever fits you better here */ 
 
} 
 
#image { 
 
    -webkit-filter: blur(50px); 
 
    filter: blur(50px); 
 
    max-width: 100%; 
 
    
 
}

<div id="image_wrapper"> 
 
    <img id="image" src="https://scratch.brockbatsell.com/black-wallpaper-13.jpg"> 
 
    </div>

için img sizin width değiştirebilir Ben ebeveynin sadece 1px bağlı dış resmin kenarlarını izin verirsek

Answer 2

İlginçtir, hata durdu husul: https://jsfiddle.net/1edf4k9t/7/

#image { 
    margin: -1px 0 0 -1px; 
    -webkit-filter: blur(50px); 
    filter: blur(50px); 
    width: calc(100% + 2px); 
} 

Bu sizin için kabul edilebilir miydi?

Answer 3

Genişlik/yükseklik oranını koruyan bir akışkan kabı, JavaScript olmadan mümkündür. Burada this Fiddle'da görebilirsiniz. Temelde yaptık ne

(JavaScript yaptığı gibi, 100/1.6) bir padding-bottom62.5% sahiptir #padding_ratio denilen bir kap, eklemektir. Bir dolgu alt tabanı, aslında ana sayfaların yüksekliğiyle göreli bir yüzde değerine sahip olamaz, çünkü web sayfalarının dikey olarak "tasarlanması" gerekmemesi nedeniyle (dikey olarak hizalamak çok zor olduğundan) elementler). Yani bir yüzde kullandığınızda, kabının genişliğine göre olacaktır.

Neyse ... Öyleyse, bu konteyner artık dolu bir kutu doludur, bu yüzden eğer içine bir img koyarsanız, dışarısı olacaktır. Bu yüzden position: absolute, yanı sıra top: 0 ve left: 0 ekledim.

Umut bu görüntüye bir -webkit-mask-image eklerseniz hata önlendiği gibi görünüyor

Answer 4

yardımcı olur:

#image { 
    -webkit-filter: blur(50px); 
    filter: blur(50px); 
    width: 100%; 
    -webkit-mask-image: linear-gradient(to right, #fff, #fff); 
} 

https://jsfiddle.net/pqjh2471/

-webkit-mask-image özellikle iyi desteklenmemektedir, ancak desteklenir 4.0'dan itibaren Safari.