मैं एक सफारी बग के आसपास कैसे काम करूं जो फ़िल्टर को अतिप्रवाह छिपाने के साथ भी बाध्य होने की अनुमति देता है?

Question

मैं एक छवि को धुंधला करने के लिए एक सीएसएस फ़िल्टर का उपयोग करने की कोशिश कर रहा हूं। सभी ब्राउज़रों में, धुंध फ़िल्टर परिणामस्वरूप छवि के सीमाओं के बाहर धुंधला होता है जिसके लिए आप धुंध (अपेक्षित) सेट करते हैं। लेकिन मैं किनारों को परिभाषित करना चाहता हूं (और छवि को एक बॉक्स छाया है), इसलिए मैं छवि को overflow पर hidden पर एक और div के साथ लपेटता हूं। यह सभी ब्राउज़रों में काम करता है।

हालांकि, कुछ ऐप-विशिष्ट बाधाओं के कारण, मुझे लोडर और आकार बदलने पर जावास्क्रिप्ट के साथ रैपर के आकार को अपडेट करने की आवश्यकता है। यह सफारी को छोड़कर सभी ब्राउज़रों में काम करता है। रैपर तत्व के आकार को बदलना यादृच्छिक रूप से एक पेंटिंग बग ट्रिगर करता है जहां फ़िल्टर रैपर की सीमा से बचने के लिए शुरू होता है। यह हमेशा नहीं होता है, लेकिन ऐसा लगता है कि मोबाइलसाफरी और/या डीओएम के आकार के आधार पर संभावना बढ़ रही है।

Here's a fiddle एक छोटे डेमो के साथ। सफारी का उपयोग करके, बार-बार विंडो का आकार बदलें और आप बग को ट्रिगर करेंगे। कभी-कभी यह खुद को पेंट और ठीक कर देगा, कभी-कभी यह नहीं होगा। (प्रयोग Chrome या Firefox और यह ठीक काम करेंगे।)

(Screenshot of the blur escaping the wrapper।)

यह ध्यान दिया जाना चाहिए कि इस बेला के विपरीत, आवेदन में मैं केवल नए चौड़ाई और ऊंचाई की स्थापना कर रहा हूँ जब वे बदलने के लिए, और सफारी अभी भी धुंध से बचने के बीच उतार-चढ़ाव करता है और आकार से बचने के दौरान भी चौड़ाई और ऊंचाई सेट नहीं किया जा रहा है।

बातें मैं कोशिश की है (कि काम नहीं किया):

• गणना और आवरण चौड़ाई की स्थापना में देरी जब तक आकार घटना clearTimeout/setTimeout
• unsetting का उपयोग करने और पर overflow: hidden को रीसेट पूरा हो गया है
• कॉल करने के बाद जावास्क्रिप्ट के साथ दोनों रैपर और छवि दोनों window.getComputedStyle(wrapper) (और छवि पर, और मूल तत्व पर)
• सभी प्रकार के शेंगेनिन्स रैपर को एक समग्र तत्व में बढ़ावा देना (उदा। translateZ(0) ट्रांसफॉर्म), जो धुंधला अतिप्रवाह के कुछ को रोकता है, लेकिन पर्याप्त नहीं है। (Screenshot।) ट्रांसफॉर्म को अक्षम करने के लिए टाइमर सेट करना बस पृष्ठ को पूर्ण धुंध से बचने के लिए देता है।
• आवरण
• पर white-space: nowrap स्थापना के बजाय object.style.width/height
• चौड़ाई और document.styleSheets[x].cssRules[x].style.setProperty() के माध्यम से ऊंचाई की स्थापना 2/5/10 के गुणकों (हाँ, मैं बेताब हूँ)

को पिक्सेल मान गोलाई

मैं इस समय बहुत अटक गया हूं, और आप जो भी सहायता प्रदान कर सकते हैं उसकी सराहना करेंगे। धन्यवाद!

Answer 1

आप एक तरल पदार्थ width सीएसएस में अपने आवरण जो आपके जे एस कोड के रूप में एक ही प्रभाव अभी करना होगा करने के लिए दे सकते हैं, और कहा कि अपने बग ठीक कर सकता है, तो आप भी 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>

को img के अपने width बदल सकते हैं

Answer 2

दिलचस्प बात यह है कि अगर मैं माता पिता की सिर्फ 1px से बंधे के बाहर छवि के किनारों जाने, बग बंद कर दिया घटित: https://jsfiddle.net/1edf4k9t/7/

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

क्या यह आपको स्वीकार्य होगा?

Answer 3

एक द्रव कंटेनर जो जावास्क्रिप्ट के बिना इसकी चौड़ाई/ऊंचाई अनुपात रखता है। आप इसे यहां this Fiddle में देख सकते हैं।

मैं मूल रूप से क्या किया है एक कंटेनर #padding_ratio कहा जाता है, जो (100/1.6 की तरह अपने जावास्क्रिप्ट किया) के padding-bottom 62.5% है जोड़ है। एक पैडिंग-डाउन में प्रतिशत मान नहीं हो सकता है जो वास्तव में इसके मूल तत्व की ऊंचाई से संबंधित है, इस तथ्य के कारण कि वेबपृष्ठों को मूल रूप से 'डिज़ाइन' लंबवत नहीं माना जाता था (इसलिए कारण यह लंबवत रूप से संरेखित करना बहुत कठिन है तत्व)। तो जब आप प्रतिशत का उपयोग करते हैं, तो यह इसके कंटेनर की चौड़ाई के सापेक्ष होगा।

वैसे भी ... तो यह कंटेनर अब पैडिंग का एक ठोस बॉक्स है, इसलिए यदि आप इसके अंदर एक आईएमजी डालते हैं, तो यह इसके बाहर होगा। इसलिए मैंने position: absolute, साथ ही top: 0 और left: 0 जोड़ा है।

आशा इस

Answer 4

में मदद करता है बग यदि आप छवि के लिए एक -webkit-mask-image जोड़ने टल किया जा रहा है:

#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 विशेष रूप से अच्छी तरह से समर्थित नहीं है, लेकिन यह में समर्थित है 4.0 से सफारी।