CSS ट्रांसफ़ॉर्म का उपयोग करने के बाद ब्लरी टेक्स्ट: स्केल (); क्रोम में

126

ऐसा लगता है कि Google Chrome में हाल ही में एक अपडेट हुआ है जो एक करने के बाद धुंधले पाठ का कारण बनता है transform: scale()। विशेष रूप से मैं यह कर रहा हूँ:

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

यदि आप क्रोम में http://rourkery.com पर जाते हैं, तो आपको मुख्य पाठ क्षेत्र पर समस्या को देखना चाहिए। यह ऐसा करने के लिए इस्तेमाल नहीं किया गया था और यह अन्य वेबकिट ब्राउज़र (जैसे सफारी) को प्रभावित नहीं करता है। 3 डी ट्रांसफ़ॉर्म के साथ समान समस्या का सामना कर रहे लोगों के बारे में कुछ अन्य पोस्ट थे, लेकिन इस तरह 2 डी ट्रांसफ़ॉर्म के बारे में कुछ भी नहीं पा सकते हैं।

किसी भी विचार की सराहना की जाएगी, धन्यवाद!

google-chrome  css  webkit  transform  css-animations 
— रयान ओ राउरके
स्रोत
बस फ़ायरफ़ॉक्स और IE 10 का उपयोग करते हुए साइट का दौरा किया, समस्या नहीं देखी। यदि यह क्रोम तक सीमित है, तो आपको इसे स्वयं ठीक करने के लिए Google की प्रतीक्षा करने की आवश्यकता हो सकती है।
— नोलोनर
मुझे कोई धुंधला दिखाई नहीं दे रहा है ... मैं क्रोम v25 / पीसी पर हूँ
— vsync
मैं इस समस्या से पहले भी आ चुका हूं, जैसा कि नोलनार ने उल्लेख किया था कि हमें इसे ठीक करने के लिए Google की प्रतीक्षा करनी होगी।
— राज_न
समाधान नहीं है, लेकिन मैंने देखा है कि मेरे लिए यह समस्या केवल तब होती है जब मैं CSS ऑप्टिमाइजेशन का उपयोग करता हूं।
— बैंकॉकियन
लिंक टूट गया है।
— तीमुथियुस ३

जवाबों:

78

मुझे यह समस्या कई बार है और इसे ठीक करने के 2 तरीके प्रतीत होते हैं (नीचे दिखाया गया है)। आप रेंडरिंग को ठीक करने के लिए इन गुणों में से किसी एक का उपयोग कर सकते हैं, या दोनों एक ही समय में कर सकते हैं।

बैकफेस विजिबिलिटी छिपी हुई समस्या को ठीक कर देती है क्योंकि यह एनीमेशन को ऑब्जेक्ट के सामने के हिस्से को सरल बनाता है, जबकि डिफ़ॉल्ट स्थिति आगे और पीछे होती है।

backface-visibility: hidden;

TranslZ भी काम करता है क्योंकि यह एनीमेशन में हार्डवेयर त्वरण को जोड़ने के लिए एक हैक है। 

transform: translateZ(0);

ये दोनों गुण आपको होने वाली समस्या को ठीक करते हैं लेकिन कुछ लोगों को जोड़ना भी पसंद है 

-webkit-font-smoothing: subpixel-antialiased;

वस्तु के लिए उनके एनिमेटेड। मुझे लगता है कि यह एक वेब फ़ॉन्ट के प्रतिपादन को बदल सकता है लेकिन उस पद्धति के साथ भी प्रयोग करने के लिए स्वतंत्र महसूस करता है।

— 2NE
स्रोत
12
ये तकनीक सभी चीजों को बेहतर बनाने के लिए लगती हैं, लेकिन मैं अभी भी क्रोम को स्पष्टता के उसी स्तर तक नहीं प्राप्त कर सकता हूं जो मैं फ़ायरफ़ॉक्स में देखता हूं।
— माइकल मार्टिन-स्मूकर
13
backface-visibility: hidden;सुनिश्चित करें कि मेरे मामले में काम किया, अपारदर्शिता संक्रमण के कारण कुछ अजीब धुंधली आवाजाही को हल करने में, जो है। अजीब आंदोलन अब चला गया है, लेकिन यह मेरे div में ग्रंथों के बजाय स्थायी रूप से धुंधला कर दिया है।
— ITWitch
14
जैसा कि @kadaru ने सुझाव दिया है, perspective(1px)अपने transform:कोड को जोड़ने का प्रयास करें , इसने मेरे लिए क्रोम में काम किया जबकि समस्या को और कुछ हल नहीं किया
— सर्ज ईरेमीव
4
क्रोम संस्करण 65.0.3325.162 (आधिकारिक बिल्ड) (64-बिट) पर काम नहीं करता है, जो उबंटू में 17.10 पर चल रहा है, जो गनोम एक्स 11 सत्र (वेलैंड ऑफ) के साथ है
— मर्केई
3
Chrome 72 में पहले दो विकल्प पाठ को परिवर्तन के अंत में & के दौरान धुंधले होने का कारण बनते हैं
— Brandito
24

धुंधलापन में सुधार करने के लिए, esp। Chrome पर, ऐसा करने का प्रयास करें:

transform: perspective(1px) translateZ(0);
backface-visibility: hidden;

अद्यतन: परिप्रेक्ष्य उपयोगकर्ता और जेड-विमान के बीच की दूरी को जोड़ता है, जो तकनीकी रूप से ऑब्जेक्ट को मापता है, जिससे धुंधलापन 'स्थायी' लगता है। perspective(1px)इसके बाद के संस्करण की तरह है बतख-टेप क्योंकि हम धुंधलेपन हम हल करने के लिए कोशिश कर रहे हैं मिलान कर रहे हैं। नीचे सीएसएस के साथ आपकी किस्मत अच्छी हो सकती है:

transform: translateZ(0);
backface-visibility: hidden;
— ykadaru
स्रोत
4
मेरे लिए, यह वास्तव में इसे बदतर बनाता है।
— बालू
1
मेरे लिए यह गड़बड़ को ठीक करता है (इसके बिना, एनीमेशन के बाद तत्व 1px चलता है, रूपांतरण: परिप्रेक्ष्य (1px अकेले इसे ठीक करें!)
— Sergiu
@balu मेरे अद्यतन उत्तर की जाँच करें! perspective(1px)संपत्ति से छुटकारा पाएं और देखें कि क्या यह बेहतर काम करता है।
— यकदुरू
16

मैंने पाया कि स्केल अनुपात को समायोजित करने से थोड़ा मदद मिली।

scale(1.048)ओवर (1.05)-पिक्सेल ब्लरिंग को कम करके, संपूर्ण-पिक्सेल फ़ॉन्ट आकार में एक बेहतर सन्निकटन उत्पन्न करने के लिए ओवर का उपयोग करना प्रतीत होता है।

मैंने वह भी उपयोग किया translateZ(0)जो ट्रांसफॉर्मेशन एनीमेशन में क्रोम के अंतिम राउंडिंग चरण को समायोजित करने के लिए लगता है। यह मेरे ऑनहोवर उपयोग के लिए एक प्लस है क्योंकि यह गति बढ़ाता है और दृश्य शोर को कम करता है। हालाँकि, एक ऑनक्लिक फ़ंक्शन के लिए, मैं इसका उपयोग नहीं करूंगा क्योंकि, परिवर्तित फ़ॉन्ट क्रिस्पी प्रतीत नहीं होता है।

— जॉर्डन नाकामोटो
स्रोत
1
यही एकमात्र तरीका है जो मेरे लिए काम करता है। अन्य दृष्टिकोण (बैकफेस-विजिबिलिटी, फिल्टर, परिप्रेक्ष्य और अच्छे पुराने अनुवाद को जोड़ना) ने इसे और खराब कर दिया। पूरे पिक्सेल को स्केल करने का प्रयास करें। उदाहरण के लिए 1,1429 (16/14) के स्केल फैक्टर का उपयोग करके 14px से 16px तक जाएँ।
— ह्यूगो डेर ह्यूनग्रिज
1
बिना मेरे लिए काम किया translateZ(0), बस बदल 1.05गया1.048
— ए। वोल्ग
15

भाग्य के साथ यहां सब कुछ करने की कोशिश करने के बाद, आखिरकार मेरे लिए यह मुद्दा तय हो गया कि मैं संपत्ति को हटा रहा हूं will-change: transform;। किसी कारण से यह क्रोम में स्केलिंग को देखते हुए बुरी तरह धुंधली हो गई, लेकिन फ़ायरफ़ॉक्स नहीं।

— सज्जन
स्रोत
कोई इसे क्यों कम करेगा? मुझे यह नहीं मिला ... :( यह क्रोम के कुछ संस्करणों में एक पूरी तरह से वैध मुद्दा है, और ऐसा लगता है कि सामान्य रूप से "इच्छा-परिवर्तन" अभी भी बहुत नया है और शायद इसका उपयोग नहीं किया जाना चाहिए। अधिक जानकारी के लिए ग्रीन्सॉक
— Dan
एक ही मुद्दा था। पोस्ट करने का शुक्रिया।
— Raine
मेरे पास Chrome 75 पर सामग्री-डिज़ाइन-घटकों के प्रतिपादन के साथ एक ही मुद्दा था। "विल-चेंजेड" सीएसएस शैली को हटाकर इसे ठीक कर दिया गया।
— रोब
क्रोम 79 में पुष्टि की
— फरेश विजयरंगम
1
मेरे पास इसके विपरीत है, will-change: transform;इस मुद्दे को थोड़ा ठीक करता है
— जैकब ज़ाविलाक
14

के बजाय 

transform: scale(1.5);

का उपयोग करते हुए 

zoom : 150%;

क्रोम में टेक्स्ट ब्लरिंग समस्या को ठीक करता है।

— नैशेल वर्धन
स्रोत
यह मदद कर सकता है लेकिन अन्य मुद्दों को भी पेश कर सकता है, जैसे कि सफेद सीमा रेखाओं को कभी
— केविन
1
निश्चित नहीं है कि नीचे की ओर क्यों। जब मैंने इसे चेकबॉक्स में लागू किया तो यह ट्रांसफॉर्मेशन की तुलना में बहुत बेहतर काम किया: स्केल ()
— ब्रायन मैक्कल
2
फ़ायरफ़ॉक्स के लिए, ट्रांसफॉर्म का उपयोग करें: स्केल () बिना किसी धुंधलापन के आकर्षण की तरह काम करता है। आपको ब्राउजर डिटेक्शन पर काम करना होगा और क्रोम / सफारी और फायरफॉक्स के अनुसार काम करना होगा।
— नैशेल वर्धन
15
एक और मुद्दा यह है कि जूम संक्रमण संपत्ति के साथ काम नहीं करता है, इसलिए इसका उपयोग CSS एनिमेशन के लिए नहीं किया जा सकता है
— ericgrosse
3
यह धुंधली चीज को काम करता है और लोमड़ी बनाता है, लेकिन यह तत्वों की स्थिति भी बदलता है।
— user1156544
8

यह क्रोम (संस्करण 56.0.2924.87) के साथ एक बग होना चाहिए, लेकिन नीचे कंसोल में सीएसएस गुणों को बदलते समय मेरे लिए धुंधलापन को ठीक करता है ('0')। मैं इसकी रिपोर्ट करूंगा।

filter: blur(.0px)
— andyw
स्रोत
1
क्या आप अपनी बग रिपोर्ट के साथ कहीं गए थे?
— डियाजोल
मुझे यह भी याद नहीं है कि मैंने बग को कहां सबमिट किया था। हालांकि ऐसा किया।
— andyw
मैं बूटस्ट्रैप (4.4.1), क्रोम (80.0.3987.132), विंडोज 10 (125% स्केल अप व्यू के साथ) का उपयोग कर रहा हूं और ड्रॉपडाउन मेनू में मेरे पास धुंधले पाठ हैं। मेनू का उपयोग करके स्थित है transform: translate3d();और यह समस्या का कारण लगता है। सुझाए गए किसी भी समाधान ने मेरे लिए काम नहीं किया। सिवाय / थोड़े इस एक के। यह तभी काम करता है जब मैं इसे पहले कुछ सकारात्मक मूल्य (जैसे blur(0.1px)) पर सेट करता हूं और फिर बदल जाता हूं blur(0px)। चूंकि तत्व गतिशील है, और इसे गतिशील (JS) समाधान की भी आवश्यकता है, ... यह बेकार है: \
— akinuri
7

सुंदर मुझे उत्तर की ओर ले जाते हैं। सिवाय filter: scaleमौजूद नहीं है, लेकिन filter: blurकरता है।

अगले घोषणाओं को उन तत्वों पर लागू करें जो धुंधला दिखाई देते हैं (मेरे मामले में वे एक परिवर्तित तत्व के अंदर थे): 

backface-visibility: hidden;    
-webkit-filter: blur(0);

यह लगभग पूरी तरह से काम किया। " लगभग " क्योंकि मैं एक संक्रमण का उपयोग कर रहा हूं और संक्रमण के दौरान, तत्व सही नहीं लगते हैं, लेकिन एक बार संक्रमण हो जाने के बाद, वे करते हैं।

— ruidovisual
स्रोत
-webkit-filter: blur(0);अकेले मेरे लिए काम करता है। backface-visibility: hidden;जब मैं स्केलिंग को बाद में रीसेट करता हूं तो मेरा तत्व ब्लर हो जाता है।
— काई हार्टमैन
यह Chrome के लिए थोड़े मज़ेदार है ... यदि मैं blur(0px);इसे सेट करता हूँ, तो इसे ठीक न करें। लेकिन अगर मैं करता हूं blur(1px);और फिर तीर कुंजी दबाता हूं तो blur(0px);यह सही दिखता है। पेज रिफ्रेश पर गया / कोई बात नहीं मैं सीएसएस में लिखता हूं
— टॉम रोजगेरो
1
@TomRoggero यह ब्लड प्रॉपर्टी की वैल्यू के लिए कम विशिष्ट लगता है और लेआउट के रिड्रॉव के बारे में अधिक जानकारी देता है। आप कुछ देरी के बाद जावास्क्रिप्ट का उपयोग करते हुए तत्व के मजबूर को फिर से प्रयोग कर सकते हैं।
— गजस
5

मुझे पता चला, कि समस्या किसी भी तरह से बदल देती है। TranslX (50%), स्केल (1.1) या कभी भी। निरपेक्ष मान हमेशा प्रदान करता है (धुंधली पाठ (ures) का उत्पादन नहीं करता है)।

किसी भी समाधान ने यहां काम नहीं किया, और मुझे लगता है कि कोई समाधान नहीं है, फिर भी (क्रोम 62.0.3202.94 का उपयोग करते हुए मैं लिख रहा हूं)।

मेरे मामले transform: translateY(-50%) translateX(-50%)में धब्बा का कारण बनता है (मैं एक संवाद को केंद्र में रखना चाहता हूं)।

थोड़ा और "पूर्ण" मूल्यों तक पहुंचने के लिए, मुझे दशमलव मानों को निर्धारित करना था transform: translateY(-50.09%) translateX(-50.09%)।

ध्यान दें

मुझे पूरा यकीन है, कि यह मान अलग-अलग स्क्रीन साइज़ पर भिन्न होता है। मैं सिर्फ अपने अनुभवों को साझा करना चाहता था, अगर यह किसी की मदद करता है।

— scipper
स्रोत
मैं इस मुद्दे को सटीक एक ही बात कर रहा था में चल रहा था। मैं ट्रांसलेशन 3 डी (-50%, -50%, 0) के साथ एक मॉडल केंद्रित कर रहा था। मेरे मामले में, मैंने -50.048% तक मूल्यों को टक्कर दी और यह बिल्कुल सही लग रहा है।
— क्रिस गुटिएरेज़
4

जोड़ना perspective(1px)मेरे लिए काम किया।

transform: scale(1.005);

सेवा

transform: scale(1.005) perspective(1px);
— SUHAIL के.सी.
स्रोत
3

zoom: 101%;जब आप ज़ूम + स्केल के संयोजन का उपयोग नहीं कर सकते, तो जटिल डिज़ाइनों का उपयोग करने का प्रयास करें ।

— टॉम रोजगेरो
स्रोत
ध्यान दें कि zoomकिसी भी वेब मानक द्वारा परिभाषित नहीं किया गया है और फ़ायरफ़ॉक्स caniuse.com/#feat=css-zoom
— Boltgolt
3

मेरे मामले में निम्नलिखित कोड धुंधली फ़ॉन्ट का कारण बने:

-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);

और सिर्फ जूम प्रॉपर्टी को जोड़ने से यह मेरे लिए तय हो गया। मेरे लिए काम करने वाले ज़ूम के साथ चारों ओर खेलें:

zoom: 97%;
— रज़ा अहमद
स्रोत
4
के लिए कोई फ़ायरफ़ॉक्स समर्थन नहींzoom
— डस्टिन पॉइज़ेंट
3

क्रोम पर केवल धुंधली ट्रांसफ़ॉर्म (ट्रांसल्यूड 3 डी, स्केलएक्स) के लिए मैं कोशिश करने के लिए एक और फिक्स तत्व को " डिस्प्ले: इनलाइन-टेबल " के रूप में तत्व सेट करना है। ;" के । ऐसा लगता है कि किसी मामले में (एक्स अक्ष पर) पिक्सेल राउंडिंग को मजबूर करना है।

मैंने पढ़ा कि क्रोम के तहत सबपिक्सल पोजिशनिंग का उद्देश्य था और देवता इसे ठीक नहीं करेंगे।

— Corentin
स्रोत
3

2019 अपडेट
क्रोम डिस्प्ले बग अभी भी अपरिचित है और हालांकि संरक्षकों की कोई गलती नहीं है, इस वेबसाइट की संपूर्णता में दिए गए सुझावों में से कोई भी समस्या को हल करने में मदद नहीं करता है। मैं समझ सकता हूं कि मैंने उनमें से हर एक को व्यर्थ करने की कोशिश की है: केवल 1 करीब आता है और यह सीएसएस नियम है: फ़िल्टर: ब्लर (0); जो 1px द्वारा कंटेनर के स्थानांतरण को समाप्त कर देता है लेकिन कंटेनर के धुंधले प्रदर्शन बग को हल नहीं करता है और इसमें कोई भी सामग्री हो सकती है।

यहाँ वास्तविकता है: वहाँ सचमुच इस समस्या का कोई समाधान नहीं है इसलिए यहाँ तरल वेबसाइटों के लिए एक काम है

CASE
मैं वर्तमान में एक द्रव वेबसाइट विकसित कर रहा हूं और इसमें 3 divs हैं, जो सभी हॉवर इफेक्ट के साथ केंद्रित हैं और चौड़ाई और स्थिति दोनों में प्रतिशत मान साझा करते हैं। क्रोम बग केंद्र कंटेनर पर होता है जो बाईं ओर स्थित है: 50%; और रूपांतरण: ट्रांसप्लक्स (-50%); एक सामान्य सेटिंग।

उदाहरण: पहले HTML ...

<div id="box1" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="box2" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="box3" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

यहां सीएसएस है जहां क्रोम बग होता है ...

*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box;  background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:50%; transform:translateX(-50%);} /* Bugged */
#box3 {right:5%;}

यहां तय है सीएसएस ...

*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box;  background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:37%;} /* Fixed */
#box3 {right:5%;}

बग्ड फिडल: https://jsfiddle.net/m9bgrunx/2/
फिक्स्ड फिडल: https://jsfiddle.net/uoc6e2dm/2/

जैसा कि आप देख सकते हैं कि सीएसएस की छोटी मात्रा में पोजिशनिंग के लिए परिवर्तन का उपयोग करने की आवश्यकता को कम या समाप्त कर देना चाहिए। यह निश्चित चौड़ाई की वेबसाइटों के साथ-साथ द्रव पर भी लागू हो सकता है।

— SJacks
स्रोत
अनुवाद का उपयोग करते समय धुंधलापन अपेक्षित है, क्योंकि तत्व एक आधा पिक्सेल पर समाप्त हो सकता है । चीजों को केंद्रित करने के लिए अब बेहतर विकल्प हैं: फ्लेक्सबॉक्स नमूना , ग्रिड नमूना
— टिमोथी 003
एकमात्र ब्राउज़र जो मैंने परीक्षण किया है जो लगता है कि रूपांतरण केंद्र के साथ एक मुद्दा है क्रोम, बाकी सब क्रिस्टल स्पष्ट दिखाई देता है। मैंने पीछे मुड़कर देखा और इस मुद्दे को लगभग 7 साल हो गए! अभी भी एक बिल्ली की त्वचा के लिए बहुत सारे तरीके हैं और जैसे आप कहते हैं कि इसकी आवश्यकता भी नहीं है।
— SJacks
यह अविश्वसनीय है, लेकिन फ़िल्टर: धुंधला (-0.1px); मेरी मदद की !!। यह काम कैसे करता है ??
— jt3k
3

मुझे ऐसी ही समस्या है। मैंने इसका उपयोग करके तय किया:

.element {
  display: table
}
— रवि
स्रोत
2
पागल लेकिन यह काम करता है; Chrome नया IE जाहिरा तौर पर है
— आर्थर
ऊँ प्रभु! आईआर काम करता है! मुझे लगता है कि पीएक्स में टेबल 'फिक्स' डे चौड़ाई आधे-पिक्सेल के साथ संभव चौड़ाई नहीं थी ...
— लुआनलुआनलुआन
2

मेरे ऊपर किसी ने काम नहीं किया। मेरे पास पॉपअप के लिए यह एनीमेशन था:

@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}

मेरे मामले में इस नियम को लागू करने के बाद धुंधला प्रभाव चला गया था: -webkit-perspective: 1000;भले ही इसे क्रोम निरीक्षक में अप्रयुक्त के रूप में चिह्नित किया गया हो।

— Gendos-ua
स्रोत
यह मेरे लिए काम करता है और इसे अप्रयुक्त के रूप में भी चिह्नित किया जाता है। मैंने यह भी जोड़ा है will-change: transform;कि तत्वों की सीमाओं के धुंधलेपन को ठीक करता है। किसी भी अन्य उत्तर ने मेरे लिए काम नहीं किया।
— याकूब ज़ाविलाक
2

मेरा समाधान था:

प्रदर्शन: प्रारंभिक;

तब वह खस्ता थी

1

उपरोक्त में से किसी ने भी मेरे लिए काम नहीं किया।

जब मैंने परिप्रेक्ष्य जोड़ा तो यह काम किया

यानी से

transform : translate3d(-10px,-20px,0) scale3d(0.7,0.7, 1)

मैं बदल गया

transform : perspective(1px) translate3d(-10px,-20px,0) scale3d(0.7,0.7, 1)

— सेनगुप्ता अमित
स्रोत
जोड़ना perspective(1px)वास्तव में मेरे लिए बदतर बना दिया :(
— बालू
1

मैंने अपना मामला जोड़कर तय किया:

transform: perspective(-1px)
— एंडर्स लंड
स्रोत
यह मेरे लिए सिर्फ scale()ट्रांसफॉर्मेशन परिणाम को हटा दिया
— jpenna
1

CHORME के ​​लिए:

Ive ने यहां सभी सुझावों की कोशिश की। लेकिन काम नहीं किया। मेरे कॉलेज को एक बढ़िया समाधान मिला, जो बेहतर काम करता है:

आप पिछले 1.0 पैमाने पर नहीं होना चाहिए

और translateZ(0)हॉवर में शामिल हैं, लेकिन हॉनर / प्रारंभिक स्थिति में नहीं।

उदाहरण:

a {
    transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transform: scale(0.8, 0.8);
}

a:hover {
    transform: translateZ(0)scale(1.0, 1.0);
}
— JonasB
स्रोत
1

मैंने सभी उत्तरों के संयोजन का उपयोग किया और अंत में मेरे लिए यही काम किया:

.modal .modal--transition {
  display: inline-table;
  transform: perspective(1px) scale(1) translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}
— काइल अंडरहिल
स्रोत
1

मैं क्रोम पर धुंधली पाठ समस्या का सामना कर रहा था लेकिन फ़ायरफ़ॉक्स पर नहीं जब मैंने उपयोग किया था transform: translate(-50%,-50%)।

ठीक है, मैंने वास्तव में बहुत सारे वर्कअराउंड की कोशिश की जैसे:

transform: perspective(1px);
filter: blur(0);
transform: translateZ(0);
backface-visibility: hidden;

इनमें से किसी ने भी मेरे लिए काम नहीं किया।

अंत में, मैंने तत्व की ऊंचाई और चौड़ाई भी बना दी। इसने मेरे लिए इस मुद्दे को हल कर दिया !!!

नोट: यह केस के उपयोग के मामले से निर्भर हो सकता है। लेकिन निश्चित रूप से एक कोशिश के काबिल!

— Prajwal_Shenoy
स्रोत
1

मैंने इन जवाबों से बहुत सारे उदाहरणों की कोशिश की है दुर्भाग्य से क्रोम के लिए कुछ भी मदद नहीं करता है Version 81.0.4044.138 मैंने बदले तत्व को जोड़ा है

 transform-origin: 50% 50%;

यह वाला 

 transform-origin: 51% 51%;

यह मेरे लिए मदद करता है

— ओलेग बोंडारेंको
स्रोत
0

मेरे लिए समस्या यह थी कि मेरे तत्व उपयोग कर रहे थे transformStyle: preserve-3d। मैंने महसूस किया कि यह वास्तव में ऐप के लिए आवश्यक नहीं था और इसे हटाने से धुंधलापन ठीक हो गया।

— Normangorman
स्रोत
0

मैंने इसे अपने कोड से हटा दिया - transform-style: preserve-3d; और इसे जोड़ दिया-transform: perspective(1px) translateZ(0);

धुंधला चला गया!

— तन्हा इस्लाम
स्रोत
0

Chrome 74.0.3729.169 में, 5-25-19 के रूप में वर्तमान, रूपांतरण के कारण होने वाले कुछ ब्राउज़र ज़ूम स्तरों पर होने वाले धुंधला होने के लिए कोई फिक्स नहीं लगता है। यहां तक ​​कि एक साधारण TransformY(50px)तत्व को धुंधला कर देगा। यह फ़ायरफ़ॉक्स, एज या सफारी के वर्तमान संस्करणों में नहीं होता है, और यह सभी ज़ूम स्तरों पर घटित नहीं होता है।

— ऑस्टिन मैककूल
स्रोत
मेरे साथ भी ऐसा ही हुआ। मैं इस धुंधले प्रभाव से छुटकारा नहीं पा सकता। एक समाधान जिसने काम किया है, वह इन गुणों को सेट करना है: top: 0, bottom: 0, left: 0; right: 0; margin: autoलेकिन तब कंटेनर पूरे स्थान को लेगा जो वह कर सकता है (यह चौड़ाई होना चाहिए), इसलिए यह उस स्थिति में काम नहीं करता है जब सामग्री को यह तय करना चाहिए कि कितना बड़ा कंटेनर होगा।
— kwiat1990
0

केवल सीएसएस से हल करना मुश्किल होगा।

इसलिए मैंने इसे jquery के साथ हल किया।

यह मेरा CSS है।

.trY {
   top: 50%;
   transform: translateY(-50%);
}

.trX {
   left: 50%;
   transform: translateX(-50%);
}

.trXY {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

और यह मेरा jquery है।

function tr_init() {
$(".trY, .trX, .trXY").each(function () {
    if ($(this).outerWidth() % 2 != 0) {
        var fixed_width = Math.ceil($(this).outerWidth() / 2) * 2;
        $(this).css("width", fixed_width);
    }
    if ($(this).outerHeight() % 2 != 0) {
        var fixed_height = Math.ceil($(this).outerHeight() / 2) * 2;
        $(this).css("height", fixed_height);
    }
})}
— madstone
स्रोत
0

बस फिक्स क्रेज में जोड़ने के लिए, बुरी तरह से दिखने वाली वस्तु के आसपास {बॉर्डर: 1 पीएक्स सॉलिड # ???} डालना मेरे लिए समस्या को ठीक करता है। यदि आपके पास एक स्थिर पृष्ठभूमि रंग है, तो इस पर भी विचार करें। यह इतना गूंगा दोपहर का है जिसका मैं उल्लेख करने के बारे में सोचा था, एह एह।

— user1769038
स्रोत
-1

filterइसे ठीक करने के लिए आप css का उपयोग कर सकते हैं ।

.element {
    filter: blur(0);
}

विक्रेता-उपसर्ग के बारे में, कृपया इसे स्वयं करें। -webkit-filter, -ms-filter। विवरण यहाँ है http://browser.colla.me/show/css_transformation_scale_cause_blinging

— sunderls
स्रोत
Developer.mozilla.org/en/docs/Web/CSS/filter केfilter: scale अनुसार कोई नहीं है
— डेविड ब्लरटन
यह उत्तर में संदर्भित URL के अनुसार धुंधला होना चाहिए।
— सर्दटोक
-1

यदि आप नहीं करते हैं तो पाठ धुंधला नहीं transitionहोगाtransform ।

बस यह करें:

&:hover {
    transform: scale(1.1);
}

जैसे संक्रमण के बिनाtransition: all .2s;

— kyw
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.