सीएसएस रूपांतरण, क्रोम में दांतेदार किनारों

Question

मैं अपनी वेबसाइट में सीमाओं के साथ छवियों और टेक्स्टबॉक्स को घुमाने के लिए CSS3 के रूपांतरण का उपयोग कर रहा हूं।

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

घुमाया हुआ फोटो और टेक्स्ट अपने आप ठीक लगता है, यह केवल सीमा है जो दांतेदार दिखती है।

सीएसएस I का उपयोग यह है:

.rotate2deg {
    transform: rotate(2deg);
    -ms-transform: rotate(2deg); /* IE 9 */
    -webkit-transform: rotate(2deg); /* Safari and Chrome */
    -o-transform: rotate(2deg); /* Opera */
    -moz-transform: rotate(2deg); /* Firefox */
}

क्या ऐसा कोई तरीका है जिससे मैं इसे ठीक कर सकूं, जैसे कि Chrome को AA का उपयोग करने के लिए मजबूर करना?

नीचे उदाहरण:

Comments

बाद में इसे पढ़ने वालों के लिए: इसे क्रोम में संस्करण 15 (नवंबर 2011) के रूप में तय किया जाना चाहिए, लेकिन सफारी ने मैक के लिए 5.1 में सटीक एक ही मुद्दा पेश किया जो अब तक तय नहीं है

— dtech

और उन्होंने इसे इतनी अच्छी तरह से तय किया, कि वापस जाना असंभव है। हमारे पास ऐसे मामले हैं जिनमें एंटीएलियासिंग वह अंतिम चीज है जो हम चाहते हैं, लेकिन अब क्रोम / क्रोमियम / सफारी में रूपांतरित चित्रों में एंटीअलियासिंग को बंद करने की कोई विधि नहीं है, हालांकि वे 1-बिट चित्र हैं (उदाहरण। b / w gif)। ब्लर इतना ठंडा है, इतना ठंडा है, अधिक धुंधला अधिक शांत है, वे कहते हैं! केवल कुरकुरा किनारों को सुनिश्चित करने के लिए सभी को एसवीजी पथ या ऑब्जेक्ट में बदलना और विशेषता आकार-प्रतिपादन = "क्रिस्पएडज" जोड़ना है।

— तिमो किन्कोनेन

मेरे लिए यह मुद्दा एक तीर बनाने के लिए इस्तेमाल की जाने वाली पारदर्शी सीमाओं के साथ है। यह जीत और मैक पर क्रोम 40 में है। यहां कोई भी विकल्प समस्या को ठीक नहीं करता है।

— गुरनार्ड

Answer 1

यदि किसी को बाद में इस पर खोज करने के लिए, क्रोम में सीएसएस परिवर्तनों पर उन दांतेदार किनारों से छुटकारा पाने के लिए एक अच्छी चाल है सीएसएस संपत्ति -webkit-backface-visibilityको एक मूल्य के साथ जोड़ना है hidden। मेरे अपने परीक्षणों में, इसने उन्हें पूरी तरह से समाप्त कर दिया है। उम्मीद है की वो मदद करदे।

-webkit-backface-visibility: hidden;

Comments

लाइफसेवर - इस ट्रिक ने हमें कई साइटों पर पुनः-सक्षम-रूपांतरण करने की अनुमति दी है जो पहले हमें एंटी-अलियासिंग मुद्दों के कारण ट्रांसफ़ॉर्म बंद करने के लिए मजबूर कर रहे थे। धन्यवाद!

— डैरेन

इस पर कोई मदद: stackoverflow.com/questions/9235342/… ?

— 12

यह क्रोम में काम करता है, लेकिन यह उन्हें आईओएस 6 में फिर से दांतेदार बना देता है!

— 23

@ इसे आईओएस ऐड में ठीक करने के लिएpadding: 1px; -webkit-background-clip: content-box;

— रोब फ्लेचर

@RobFletcher ने पैडिंग और बैकग्राउंड-क्लिप जोड़ी, जो इस धागे के अनुसार, क्रॉस-ब्राउज़र और क्रॉस-ओएस समाधान के लिए आवश्यक है। यह मेरे OSX / Chrome समस्या को भी ठीक करता है ... मुझे लगता है कि एक पूर्ण समाधान कुछ इस तरह होगा:padding: 1px;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-background-clip:content-box;background-clip:content-box;

— बेंजामिन लुओमा

Answer 2

यदि आप transitionइसके बजाय उपयोग कर रहे हैं transform, -webkit-backface-visibility: hidden;तो काम नहीं करता है। एक पारदर्शी png फ़ाइल के लिए एनीमेशन के दौरान एक दांतेदार किनारा दिखाई देता है।

इसे हल करने के लिए मैंने इस्तेमाल किया: outline: 1px solid transparent;

Comments

यह उन स्थितियों में मदद करता है जहां वेब-किट-बैक-विज़िबिलिटी प्रॉपर्टी छूट गई थी।

— dgibbs

मेरे लिए काम करता है जब दूसरों में से कोई भी नहीं किया था। इस संपत्ति को जोड़ने से पहले, क्रोम एंड्रॉइड के मुद्दे थे। अब सभी ब्राउज़र ठीक से काम करने लगते हैं।

— बर्नी सम्मोहन

आईओएस 8 पर सफारी में मेरे लिए काम करता है

— फ्रेडरिक

सही समाधान। दूसरों ने काम नहीं किया। मैंने लगभग हार मान ली, और यह संदेह था कि यह काम करेगा। लेकिन यह करता है!

— गेरोनिस

मेरी जरूरतों के लिए पूरी तरह से काम करता है। मैं वास्तव में संक्रमण का उपयोग कर रहा हूं, और अन्य उत्तर मेरे PNG को इसकी डिफ़ॉल्ट स्थिति में पिक्सेलयुक्त होने का कारण बना रहे थे। आपके उत्तर ने डिफ़ॉल्ट स्थिति पर और संक्रमण के दौरान - किसी भी पिक्सेलकरण को निकालने में मदद की। उत्तम!

— गरकोनिस

Answer 3

1px पारदर्शी बॉर्डर जोड़ने से एंटी-अलियासिंग ट्रिगर हो जाएगा

outline: 1px solid transparent;

वैकल्पिक रूप से, 1px पारदर्शी बॉक्स-छाया जोड़ें।

box-shadow: 0 0 1px rgba(255,255,255,0);

Comments

rgba (255, 255, 255, 0) शायद बेहतर है

— mmm

अपने उत्तर में सीएसएस के शीर्ष भाग को जोड़ना और outline: 1px solid transparent;मेरे लिए अच्छी तरह से काम किया। ऊपर दिए गए अन्य समाधान पर्याप्त रूप से कारगर नहीं हुए।

— तीमुथियुस Zorn

outline: 1px solid transparent;एंटी-अलियासिंग को फ़ायरफ़ॉक्स 52 में भी ट्रिगर करें (जो क्रोम की समान परेशानी है)

— लुका डेटोमी

Answer 4

3 डी परिवर्तन की कोशिश करो। यह एक आकर्षण की तरह काम करता है!

/* Due to a bug in the anti-liasing*/
-webkit-transform-style: preserve-3d; 
-webkit-transform: rotateZ(2deg);

Comments

क्रोम में अब यह कोशिश करना (अगस्त 2013 को एक मैक पर), स्वीकृत समाधान काम नहीं कर रहा है, लेकिन इस का उपयोग कर (विशेष रूप से preserve-3d, rotateअभी भी इसका उपयोग बिना बदले में किया जा सकता है rotateZ) करता है।

— डेव

सुपर हैकी, लेकिन मेरे लिए काम किया। दृश्यमान-संरेखण से बचने के लिए 0.05 जैसी छोटी डिग्री भी आज़माएं।

— cpursley

संरक्षित -3 डी ने मेरी जान बचाई।

— हैन्स

Answer 5

चुना हुआ उत्तर (न ही कोई अन्य उत्तर) मेरे लिए काम नहीं किया, लेकिन यह किया:

img {outline:1px solid transparent;}

Answer 6

मैं -45deg के साथ एक CSS3 ढाल के साथ एक मुद्दा रहा है। backgroundSlanted, बुरी तरह से दांतेदार के समान है, लेकिन मूल पोस्ट से भी बदतर था। इसलिए मैंने दोनों के साथ खेलना शुरू कर दिया background-size। यह दांतेदारपन को बढ़ाएगा, लेकिन यह अभी भी था। तब अलावा मैंने पढ़ा है कि अन्य लोगों के मुद्दों को भी हो रही है 45deg वेतन वृद्धि पर तो मैं से समायोजित -45degकरने के लिए -45.0001degऔर मेरी समस्या हल किया गया था।

नीचे मेरे सीएसएस में, background-sizeशुरू में था 30pxऔर degपृष्ठभूमि के लिए ढाल बिल्कुल था -45deg, और सभी keyframes थे 30px 0।

    @-webkit-keyframes progressStripeLTR {
        to {
            background-position: 60px 0;
        };
    }

    @-moz-keyframes progressStripeLTR {
        to {
            background-position: 60px 0;
        };
    }

    @-ms-keyframes progressStripeLTR {
        to {
            background-position: 60px 0;
        };
    }

    @-o-keyframes progressStripeLTR {
        to {
            background-position: 60px 0;
        };
    }

    @keyframes progressStripeLTR {
        to {
            background-position: 60px 0;
        };
    }

    @-webkit-keyframes progressStripeRTL {
        to {
            background-position: -60px 0;
        };
    }

    @-moz-keyframes progressStripeRTL {
        to {
            background-position: -60px 0;
        };
    }

    @-ms-keyframes progressStripeRTL {
        to {
            background-position: -60px 0;
        };
    }

    @-o-keyframes progressStripeRTL {
        to {
            background-position: -60px 0;
        };
    }

    @keyframes progressStripeRTL {
        to {
            background-position: -60px 0;
        };
    }

    .pro-bar-candy {
        width: 100%;
        height: 15px;

        -webkit-border-radius:  3px;
        -moz-border-radius:     3px;
        border-radius:          3px;

        background: rgb(187, 187, 187);
        background: -moz-linear-gradient(
                        -45.0001deg,
                        rgba(187, 187, 187, 1.00) 25%,
                        transparent 25%,
                        transparent 50%,
                        rgba(187, 187, 187, 1.00) 50%,
                        rgba(187, 187, 187, 1.00) 75%,
                        transparent 75%,
                        transparent
                    );
        background: -webkit-linear-gradient(
                        -45.0001deg,
                        rgba(187, 187, 187, 1.00) 25%,
                        transparent 25%,
                        transparent 50%,
                        rgba(187, 187, 187, 1.00) 50%,
                        rgba(187, 187, 187, 1.00) 75%,
                        transparent 75%,
                        transparent
                    );
        background: -o-linear-gradient(
                        -45.0001deg,
                        rgba(187, 187, 187, 1.00) 25%,
                        transparent 25%,
                        transparent 50%,
                        rgba(187, 187, 187, 1.00) 50%,
                        rgba(187, 187, 187, 1.00) 75%,
                        transparent 75%,
                        transparent
                    );
        background: -ms-linear-gradient(
                        -45.0001deg,
                        rgba(187, 187, 187, 1.00) 25%,
                        transparent 25%,
                        transparent 50%,
                        rgba(187, 187, 187, 1.00) 50%,
                        rgba(187, 187, 187, 1.00) 75%,
                        transparent 75%,
                        transparent
                    );
        background: linear-gradient(
                        -45.0001deg,
                        rgba(187, 187, 187, 1.00) 25%,
                        transparent 25%,
                        transparent 50%,
                        rgba(187, 187, 187, 1.00) 50%,
                        rgba(187, 187, 187, 1.00) 75%,
                        transparent 75%,
                        transparent
                    );
        background: -webkit-gradient(
                        linear,
                        right bottom,
                        right top,
                        color-stop(
                            25%,
                            rgba(187, 187, 187, 1.00)
                        ),
                        color-stop(
                            25%,
                            rgba(0, 0, 0, 0.00)
                        ),
                        color-stop(
                            50%,
                            rgba(0, 0, 0, 0.00)
                        ),
                        color-stop(
                            50%,
                            rgba(187, 187, 187, 1.00)
                        ),
                        color-stop(
                            75%,
                            rgba(187, 187, 187, 1.00)
                        ),
                        color-stop(
                            75%,
                            rgba(0, 0, 0, 0.00)
                        ),
                        color-stop(
                            rgba(0, 0, 0, 0.00)
                        )
                    );

        background-repeat: repeat-x;
        -webkit-background-size:    60px 60px;
        -moz-background-size:       60px 60px;
        -o-background-size:         60px 60px;
        background-size:            60px 60px;
        }

    .pro-bar-candy.candy-ltr {
        -webkit-animation:  progressStripeLTR .6s linear infinite;
        -moz-animation:     progressStripeLTR .6s linear infinite;
        -ms-animation:      progressStripeLTR .6s linear infinite;
        -o-animation:       progressStripeLTR .6s linear infinite;
        animation:          progressStripeLTR .6s linear infinite;
        }

    .pro-bar-candy.candy-rtl {
        -webkit-animation:  progressStripeRTL .6s linear infinite;
        -moz-animation:     progressStripeRTL .6s linear infinite;
        -ms-animation:      progressStripeRTL .6s linear infinite;
        -o-animation:       progressStripeRTL .6s linear infinite;
        animation:          progressStripeRTL .6s linear infinite;
        }

Answer 7

आप धुंधले बॉक्स-शैडो का उपयोग करके जैगिंग को मास्क करने में सक्षम हो सकते हैं । बॉक्स-छाया के बजाय -webkit- बॉक्स-छाया का उपयोग करना सुनिश्चित करेगा कि यह गैर-वेबकिट ब्राउज़र को प्रभावित नहीं करता है। आप सफ़ारी और मोबाइल वेबकिट ब्राउज़रों को देखना चाहते हैं।

परिणाम कुछ बेहतर है, लेकिन फिर भी अन्य ब्राउज़रों के साथ बहुत कम अच्छा है:

Answer 8

बस हमने सोचा कि हम अपने समाधान में भी फेंक देंगे क्योंकि हमें क्रोम / विंडोज पर ठीक यही समस्या थी।

हमने ऊपर @stevenWatkins द्वारा समाधान की कोशिश की, लेकिन फिर भी "कदम" था।

के बजाय

-webkit-backface-visibility: hidden;

हमने इस्तेमाल किया:

-webkit-backface-visibility: initial;

हमारे लिए यह चाल trick की थी

Answer 9

निम्नलिखित प्रश्न में तत्व के आसपास के div पर जोड़ना मेरे लिए यह तय किया।

-webkit-transform-style: preserve-3d;

दांतेदार किनारों मेरे मामले में वीडियो विंडो के आसपास दिखाई दे रहे थे।

Answer 10

मेरे लिए यह सीएसएस संपत्ति का परिप्रेक्ष्य था जिसने चालबाजी की:

-webkit-perspective: 1000;

मेरे मामले में पूरी तरह से अतार्किक है क्योंकि मैं कोई 3 डी संक्रमण का उपयोग नहीं करता, लेकिन फिर भी काम करता है।

Answer 11

क्रोम में कैनवास के लिए (संस्करण 52)

सभी सूचीबद्ध उत्तर छवियों के बारे में हैं। लेकिन मेरा मुद्दा क्रोम के बारे में है (v.52) ट्रांसफॉर्म रोटेट के साथ। वे दंग हो गए और यह सभी तरीके मदद नहीं कर सकते।

समाधान जो मेरे लिए काम करता है:

1. प्रत्येक पक्ष के लिए 1 px पर बड़ा कैनवास बनाएं => +2 px चौड़ाई और ऊंचाई के लिए;
2. ऑफसेट + 1px (0,0 के बजाय स्थिति 1,1 में) और निश्चित आकार (छवि का आकार कैनवास से 2px कम होना चाहिए) के साथ चित्र बनाएं
3. आवश्यक रोटेशन लागू करें

इतना महत्वपूर्ण कोड ब्लॉक:

// Unfixed version
ctx.drawImage(img, 0, 0, 335, 218);
// Fixed version
ctx.drawImage(img, 1, 1, 335, 218);

/* This style should be applied for fixed version */
canvas {
  margin-left: -1px;
  margin-top:-1px;
}        

<!--Unfixed version-->
<canvas width="335" height="218"></canvas>
<!--Fixed version-->
<canvas width="337" height="220"></canvas>

नमूना: https://jsfiddle.net/tLbxgusx/1/

नोट: इसमें बहुत सारे नेस्टेड डिव हैं क्योंकि यह मेरी परियोजना का सरलीकृत संस्करण है।

---

यह मुद्दा मेरे लिए फ़ायरफ़ॉक्स के लिए भी पुन: पेश किया गया है। रेटिना के साथ सफारी और एफएफ पर ऐसा कोई मुद्दा नहीं है।

और अन्य स्थापित समाधान कैनवास को एक ही आकार के div में रखना और निम्नलिखित div को इस div पर लागू करना है:

overflow: hidden;
box-shadow: 0 0 1px rgba(255,255,255,0);
// Or
//outline:1px solid transparent;

और इस रैपिंग डिव के लिए रोटेशन लागू किया जाना चाहिए। तो सूचीबद्ध समाधान काम किया जाता है, लेकिन छोटे संशोधन के साथ।

और इस तरह के समाधान के लिए संशोधित उदाहरण है: https://jsfiddle.net/tLbxgusx/2/

नोट: कक्षा 'तीसरी' के साथ div की शैली देखें।