CSS संक्रमण प्रभाव क्रोम में छवि को धुंधला / चालित छवि 1px बनाता है?

Question

मेरे पास कुछ CSS हैं जो hover पर हैं, एक CSS ट्रांस्फ़ॉर्म इफ़ेक्ट एक div ले जाएगा।

समस्या, जैसा कि आप उदाहरण में देख सकते हैं, यह है कि translateसंक्रमण का 1x डाउन / राइट (और संभवतः कभी थोड़ा आकार बदलकर?) में विभक्त चाल में छवि बनाने का भयानक दुष्प्रभाव है? ओझल...

हच पूरे समय लागू करने के लिए लगता है कि हॉवर प्रभाव लागू होता है, और परीक्षण और त्रुटि की प्रक्रिया से मैं सुरक्षित रूप से केवल तभी कह सकता हूं जब ट्रांसलेशन संक्रमण डिव (बॉक्स छाया और अपारदर्शिता भी लागू होता है) लागू होते हैं लेकिन इससे कोई फर्क नहीं पड़ता त्रुटि को हटा दिया जाता है)।

समस्या केवल तब होती है जब पेज स्क्रॉल किया जाता है। तो div के सिर्फ एक उदाहरण के साथ उदाहरण ठीक है, लेकिन एक बार अधिक समान divs जोड़ दिए जाते हैं और पृष्ठ को इसलिए स्क्रॉलबार की आवश्यकता होती है जिससे समस्या फिर से शुरू होती है ...

Comments

मैं OSX पर Chrome 27 पर हूं, और यह ठीक है। मेरा मानना ​​है कि जब सामग्री एक परत में डाल दी जाती है तो यह एनीमेशन के दौरान बिटमैप में बदल जाती है, और पुराने संस्करणों / पुराने ग्राफिक्स कार्ड पर यह बहुत अच्छा नहीं लगता है। एक नया संस्करण आज़माएँ और देखें कि क्या यह ठीक है।

— रिच ब्रैडशॉ

Chrome 25 OS X पर सभी कुछ ठीक है। BTW: मैं 300KB छवि की तुलना में पृष्ठभूमि ढाल बनावट के लिए एक अलग दृष्टिकोण सुझाता हूं!

— पाओलो

और धन्यवाद @ पाओलो - पृष्ठभूमि छवि केवल प्रदर्शन के लिए थी, यह वास्तविक साइट पर उपयोग में छवि नहीं है!

— लुईस

समस्या तब पैदा होती है जब एनीमेशन को GPU द्वारा नियंत्रित किया जाता है, ऐसा लगता है कि बिटमैप राउंडिंग थोड़ा सा बंद हैं। कैनरी में पुन: पेश किया जाता है, लेकिन यह ठीक काम करता है यदि आप GPU त्वरण को बंद करते हैं

— 22:17

आप प्रत्येक फ्रेम में इस समाधान को आजमा सकते हैं ... stackoverflow.com/a/42256897/1834212

— Miguel

Answer 1

2020 अद्यतन

• यदि आपके पास धुंधली छवियों के साथ समस्याएँ हैं, तो नीचे दिए गए उत्तरों के साथ-साथ विशेष रूप से image-renderingCSS संपत्ति की जाँच करना सुनिश्चित करें ।
• सर्वोत्तम अभ्यास पहुंच और एसईओ वार के लिए आप ऑब्जेक्ट-फिट सीएसएस संपत्ति <img>का उपयोग करके टैग को पृष्ठभूमि छवि से बदल सकते हैं।

---

मूल उत्तर

अपने CSS में इसे आज़माएं :

.your-class-name {
    /* ... */
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
}

यह क्या करता है यह विभाजन को "अधिक 2D" व्यवहार करने के लिए बनाता है।

• बैकफ़ास्ट को एक डिफ़ॉल्ट के रूप में घुमाया जाता है ताकि चीजों को घुमाए जाने और ऐसी चीजों के साथ अनुमति दी जा सके। इसकी कोई आवश्यकता नहीं है कि यदि आप केवल बाएं, दाएं, ऊपर, नीचे, स्केल या रोटेट (काउंटर) को दक्षिणावर्त घुमाते हैं।
• हमेशा शून्य मान के लिए Z- अक्ष का अनुवाद करें।
• क्रोम अब हैंडल backface-visibilityऔर प्रीफ़िक्स के transformबिना -webkit-। मैं वर्तमान में यह नहीं जानता कि यह अन्य ब्राउज़रों के रेंडरिंग (FF, IE) को कैसे प्रभावित करता है, इसलिए सावधानी के साथ गैर-उपसर्ग संस्करणों का उपयोग करें।

Comments

हो सकता है कि मैंने कुछ समझाया नहीं हो, लेकिन इसने मेरे लिए इस समस्या को ठीक करने के लिए पर्याप्त समझाया।

— मैकनाब

@ क्लैस स्टेकर - क्या समझाना है? आप बस अपने समस्याग्रस्त तत्व को कोड पेस्ट करें। Btw यह बहुत अच्छा काम करता है!

— easwee

मैं सुझाव देता हूं कि यह समाधान stackoverflow.com/a/42256897/1834212 नकल से बचने के लिए लिंक पोस्ट कर रहा है

— मिगुएल

क्या कोई पुष्टि कर सकता है कि यह अभी भी काम करता है, क्योंकि जब भी मैं `-webkit-backface-दृश्यता` जोड़ता -webkit-transformहूं और , मैं वास्तव में बदलाव नहीं देख सकता हूं, और जब मैं क्रोम डेवलपर डेवलपर कंसोल खोलता हूं। मैं देख रहा हूं कि उन 2 सीएसएस संपत्तियों के माध्यम से स्ट्रोक किया गया है, जैसे कि वे ओवरराइट किए गए हैं, लेकिन वे (खाली सीएसएस और एचटीएमएल) नहीं हैं। ऐसा लगता है जैसे क्रोम अब उन्हें स्वीकार नहीं करता है।

— केविन एम

@KevinM -webkit- उपसर्गों के बिना कोशिश करते हैं, ये अब मानक सीएसएस हैं।

— सम्पोह

Answer 2

आपको तत्व में 3 डी परिवर्तन लागू करने की आवश्यकता है, इसलिए इसे अपनी समग्र परत मिलेगी। उदाहरण के लिए:

.element{
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

या

.element{
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

परत निर्माण मानदंड के बारे में अधिक आप यहाँ पढ़ सकते हैं: क्रोम में त्वरित प्रतिपादन

---

एक स्पष्टीकरण:

उदाहरण (हॉवर ग्रीन बॉक्स):

• समस्या: संक्रमण से सिबलिंग तत्वों पर प्रभाव पड़ सकता है (OSx Lion, Chrome 30)
• समाधान: अपनी समग्र परत पर एक तत्व

जब आप अपने तत्व पर किसी भी संक्रमण का उपयोग करते हैं, तो यह ब्राउज़र को पुनर्गणना शैलियों का कारण बनता है, फिर अपनी सामग्री को फिर से लेआउट करें भले ही संक्रमण संपत्ति दृश्यमान हो (मेरे उदाहरण में यह एक अस्पष्टता है) और अंतिम रूप से एक तत्व को पेंट करें:

यहां समस्या उस सामग्री का पुनः लेआउट है जो संक्रमण होने पर पृष्ठ पर "नृत्य" या "निमिष" तत्वों का प्रभाव बना सकती है। यदि आप सेटिंग में जाते हैं, तो "कम्पोज़िट लेयर्स दिखाएं" चेकबॉक्स को चेक करें और फिर एक तत्व में 3 डी ट्रांसफ़ॉर्म लागू करें, आप देखेंगे कि यह स्वयं की परत है जो नारंगी सीमा के साथ उल्लिखित है।

तत्व की अपनी परत हो जाने के बाद, ब्राउज़र को फिर से लेआउट के बिना संक्रमण पर समग्र परतों की आवश्यकता होती है या यहां तक ​​कि पेंट संचालन भी करना पड़ता है ताकि समस्या को हल किया जा सके:

Comments

अच्छी सामग्री! आपका जवाब कितना विस्तृत था, इसका एक कारण मिला! स्क्रीन कैप्चरिंग / एरोइंग के लिए आप कौन सा सॉफ्टवेयर उपयोग कर रहे हैं?

— kroe

दोस्त पर हाजिर !! मुझे वहाँ बहुत परेशानी से बचाया।

इसने मेरे लिए चाल चली। सबसे पहले मैं उस अभिभावक पर TranslZ का उपयोग कर रहा था जिसे मैं एनिमेट कर रहा था, लेकिन पृष्ठभूमि-छवि के भीतर अभी भी धुंधली थी। मैं वेग का उपयोग कर रहा हूँ। जे एस इसके भीतर अभी तक एक और कंटेनर पैमाने पर करने के लिए translateZ: 0.000001(कुछ infinitesimal #) और voila लागू! तीव्र पृष्ठभूमि-चित्र एक बार फिर!

— नोटाचू

धन्यवाद दोस्त। इसने मेरी समस्या पर काम किया। वैसे, मेरी समस्या यह है कि मेरे पास एक ऐसा तत्व है जिसे 90 डिग्री से घुमाया जाता है और इसमें अपारदर्शिता का उपयोग करके एक फीका संक्रमण होता है। संक्रमण को ट्रिगर करते समय तत्व की सामग्री बाएं से 1px चल रही है।

— लॉयड एरॉन

Answer 3

एम्बेड किए गए youtube iframe के साथ भी यही समस्या थी (iframe तत्व को केंद्रित करने के लिए अनुवाद का उपयोग किया गया था)। ऊपर दिए गए समाधानों में से कोई भी काम नहीं किया जब तक कि रीसेट सीएसएस फिल्टर और जादू की कोशिश नहीं हुई।

संरचना:

<div class="translate">
     <iframe/>
</div>

शैली [पहले]

.translate {
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

शैली [के बाद]

.translate {
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  filter: blur(0);
  -webkit-filter: blur(0);
}

Comments

filter: blur(0)मेरे लिए यह किया!

— निक

धुंधला के साथ अविश्वसनीय O_o डब्ल्यूटीएफ? यह डिफ़ॉल्ट रूप से क्यों है?

— यूरी पोलेझायेव

मेरे लिए भी यही समाधान था। स्वीकृत उत्तर उन लोगों के लिए काम कर सकता है जो अपने ट्रांसफ़ॉर्मिंग गुणों में अन्य "ट्रांसलेट" फ़ंक्शन का उपयोग नहीं कर रहे हैं, लेकिन यह मेरे लिए काम नहीं कर रहा था।

— एडवर्ड कोयल जूनियर

क्या -webkit-उपसर्ग पहले नहीं आना चाहिए ? अधिक जानकारी

— ट्रेवर नेस्टमैन

Answer 4

मैंने एक प्रयोगात्मक नई विशेषता सीएसएस की सिफारिश की है जिसे मैंने नवीनतम ब्राउज़र पर परीक्षण किया है और यह अच्छा है:

image-rendering: optimizeSpeed;             /*                     */
image-rendering: -moz-crisp-edges;          /* Firefox             */
image-rendering: -o-crisp-edges;            /* Opera               */
image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
image-rendering: optimize-contrast;         /* CSS3 Proposed       */
-ms-interpolation-mode: nearest-neighbor;   /* IE8+                */

इससे ब्राउजर को रेंडरिंग के लिए एल्गोरिदम का पता चल जाएगा

Comments

इसने मेरी धुँधली घूमने वाली छवियों को ठीक कर दिया, जबकि बैक-विज़िबिलिटी, ब्लर (0), ट्रांसजेड ने मेरे लिए काम नहीं किया। धन्यवाद।

— लुई एमलिन

कुछ उपयोग के मामलों में निश्चित चित्र, इसे कुछ अन्य लोगों में बुरी तरह से बदतर बना दिया है :) किसी भी मामले में दिलचस्प!

— साइमन स्टाइनबर्गर

गहराई से खोदना: image-rendering: -webkit-optimize-contrast;क्रोम पर समस्या हल करता है। हालाँकि, अन्य ब्राउज़रों की छवियां, जैसे फ़ायरफ़ॉक्स, प्रदान किए गए विकल्प सेट के साथ बहुत खराब हो जाती हैं। इसलिए, मैं केवल WebKit निर्देश का उपयोग करता हूं, जो ब्लिंक इंजन पर भी काम करता है। धन्यवाद!

— साइमन स्टाइनबर्गर

कुछ मामलों में यह छवियों को स्पष्ट रूप से दंभी होने का कारण बनता है।

— धुंधला

Answer 5

बस एक और कारण पाया गया कि एक तत्व तब्दील होने पर धुँधला क्यों जाता है। मैं transform: translate3d(-5.5px, -18px, 0);एक तत्व को पुनः लोड करने के लिए उपयोग कर रहा था, जब यह लोड हो गया था, हालांकि वह तत्व धुँधला हो गया था।

मैंने ऊपर दिए गए सभी सुझावों की कोशिश की, लेकिन यह पता चला कि यह मेरे लिए अनुवाद मूल्यों में से एक के लिए दशमलव मान का उपयोग करने के कारण था। संपूर्ण संख्याएं धब्बा का कारण नहीं बनती हैं, और आगे मैं पूरी संख्या से चला गया जितना बुरा धब्बा बन गया।

यानी 5.5pxतत्व को सबसे अधिक धुंधला करता है, सबसे 5.1pxकम।

बस मैंने सोचा था कि मैं इसे यहाँ चक दूंगा अगर यह किसी की मदद करे।

Comments

धन्यवाद, मेरे मामले में यह मुद्दा था - मैं ट्रांस-वाई (-50%) का उपयोग कर रहा था, जो एक दशमलव पिक्सेल मान का मूल्यांकन कर रहा होगा।

— b4tch

Answer 6

मैंने चरणों द्वारा संक्रमण का उपयोग करके समस्या को धोखा दिया, सुचारू रूप से नहीं

transition-timing-function: steps(10, end);

यह एक हल नहीं है, यह एक धोखा है और इसे हर जगह लागू नहीं किया जा सकता है।

मैं इसे समझा नहीं सकता, लेकिन यह मेरे लिए काम करता है। कोई अन्य उत्तर मुझे (OSX, Chrome 63, गैर-रेटिना प्रदर्शन) मदद नहीं करता है।

https://jsfiddle.net/tuzae6a9/6/

Comments

अपने फिडल में पार्किंसंस की तरह हिल रहा है, लेकिन मेरे मामले में काम किया।

— तेरसियो ज़ेमेल

Answer 7

zoomमेरे साथ काम करने के लिए दोगुना और आधा नीचे लाना ।

transform: scale(2);
zoom: 0.5;

Comments

यह छवियों के लिए क्रोम में काम करने लगता है। दुर्भाग्य से यह किसी भी html को भी संशोधित करता है जिसे आपने इसे भी रखा है।

— जैक डेविडसन

Answer 8

मैं लगभग 10 संभव समाधान की कोशिश की है। उन्हें मिलाया और वे अभी भी सही ढंग से काम नहीं किया। अंत में हमेशा 1px शेक होता था।

मैं फ़िल्टर पर संक्रमण के समय को कम करके समाधान ढूंढता हूं।

यह काम नहीं किया:

.elem {
  filter: blur(0);
  transition: filter 1.2s ease;
}
.elem:hover {
  filter: blur(7px);
}

उपाय:

.elem {
  filter: blur(0);
  transition: filter .7s ease;
}
.elem:hover {
  filter: blur(7px);
}

इसे फिडेल में आज़माएं:

.blur {
  border: none;
  outline: none;
  width: 100px; height: 100px;
  background: #f0f;
  margin: 30px;
  -webkit-filter: blur(10px);
  transition: all .7s ease-out;
  /* transition: all .2s ease-out; */
}
.blur:hover {
  -webkit-filter: blur(0);
}

.blur2 {
  border: none;
  outline: none;
  width: 100px; height: 100px;
  background: tomato;
  margin: 30px;
  -webkit-filter: blur(10px);
  transition: all .2s ease-out;
}
.blur2:hover {
  -webkit-filter: blur(0);
}

<div class="blur"></div>

<div class="blur2"></div>

मुझे उम्मीद है इससे किसी को सहायता मिलेगी।

Answer 9

प्रयत्न filter: blur(0);

इसने मेरे लिए काम किया

Comments

मेरे लिए भी काम किया, क्रोम 63, 64, और विवाल्डी 1.13

— GTCrais

Answer 10

मेरे लिए, अब 2018 में। मेरी समस्या को ठीक करने वाली एकमात्र चीज़ (होवर पर एक छवि के माध्यम से चलने वाली एक सफेद चमकदार-झिलमिलाहट लाइन) मेरे तत्व को जोड़ने वाले तत्व को लागू कर रही है transform: scale(1.05)

a {
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   -webkit-transform: translateZ(0) scale(1.0, 1.0);
   transform: translateZ(0) scale(1.0, 1.0);
   -webkit-filter: blur(0);
   filter: blur(0);
}
a > .imageElement {
   transition: transform 3s ease-in-out;
}

Comments

हाँ! क्रोम में 'ब्लर (0)' मेरे लिए इसे ठीक करता है। छवि को आकार में बहुत कम धुंधली बनाता है, हालांकि कूदने / आकार से कम ध्यान देने योग्य है

— 00-बीबीबी

Answer 11

filter: blur(0)
transition: filter .3s ease-out
transition-timing-function: steps(3, end) // add this string with steps equal duration

मुझे संक्रमण की अवधि के .3sबराबर संक्रमण के समय के चरणों को निर्धारित करने में मदद मिली.3s

Answer 12

बस वही समस्या है। स्थिति निर्धारित करने का प्रयास करें: मूल तत्व के सापेक्ष, जो मेरे लिए काम करता है।

Comments

क्या आपके पास इस काम का डेमो है? मुझे नहीं पता कि यह कैसे मदद करेगा

— Zach Saucier

यदि आप कृपया अपना उत्तर संपादित कर सकते हैं और समझा सकते हैं कि आप जो कोड दिखा रहे हैं, और वह कोड क्यों / कैसे प्रश्न का उत्तर देता है, तो यह वास्तव में मदद कर सकता है। अपने दम पर कोड ब्लॉक आमतौर पर उपयोगी जवाब नहीं होते हैं।

— कोहेन