সিএসএস রূপান্তর, ক্রোমে দাগযুক্ত প্রান্তগুলি

Question

আমি আমার ওয়েবসাইটের সীমানা সহ চিত্র এবং পাঠ্যবক্সগুলি ঘোরানোর জন্য CSS3 রূপান্তর ব্যবহার করছি।

সমস্যাটি হ'ল সীমান্তটি অ্যান্টি-অ্যালাইজিং ছাড়াই (নিম্ন-রেজোলিউশন) গেমের মতো ক্রোমে জাগ্রত দেখায়। আইই, অপেরা এবং এফএফ এ এটি আরও ভাল দেখায় কারণ এএ ব্যবহার করা হয় (যা এখনও স্পষ্টভাবে দৃশ্যমান তবে এটি খারাপ নয়)। আমি সাফারি পরীক্ষা করতে পারছি না কারণ আমার কোনও ম্যাক নেই।

ঘোরানো ফটো এবং পাঠ্য নিজেই সূক্ষ্ম দেখায়, এটি কেবল জঞ্জাল দেখায় এমন সীমান্ত।

আমি যে সিএসএস ব্যবহার করি তা হ'ল:

.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 কে এএ ব্যবহার করতে বাধ্য করা?

নীচে উদাহরণ:

Comments

যারা পরে এটি পড়ছেন তাদের জন্য: এটি সংস্করণ 15 (নভেম্বর ২০১১) হিসাবে Chrome এ স্থির করা উচিত, তবে সাফারি ম্যাকের জন্য 5.1 তে হুবহু একই সমস্যাটি প্রবর্তন করেছিলেন যা এখনও ঠিক করা হয়নি

— dtech

এবং তারা এটিকে এত ভালভাবে স্থির করেছিল যে ফিরে যাওয়া অসম্ভব। আমাদের ক্ষেত্রে অ্যান্টিয়ালাইজিং হ'ল সর্বশেষ জিনিসটি আমরা চাই, তবে এখন ক্রোম / ক্রোমিয়াম / সাফারি রূপান্তরিত চিত্রগুলিতে অ্যান্টিয়ালাইজিং বন্ধ করার কোনও পদ্ধতি নেই যদিও সেগুলি 1-বিট চিত্র (যেমন বি / ডাব্লু জিআইএফ)। অস্পষ্টতা এত শীতল, এত শীতল, আরও অস্পষ্টতা আরও শীতল, তারা বলে! খাস্তা প্রান্তগুলি নিশ্চিত করার একমাত্র উপায় হ'ল সকলকে এসজিজি পাথ বা বস্তুতে রূপান্তর করা এবং অ্যাট্রিবিউট শেপ-রেন্ডারিং = "ক্রিস্পজেডস" যুক্ত করা add

— টিমো কাহকেনেন

আমার কাছে সমস্যাটি তীর তৈরি করতে ব্যবহৃত স্বচ্ছ সীমানাগুলির সাথে। এটি ক্রোম 40 এ জয় এবং ম্যাকের মধ্যে রয়েছে। এখানে বিকল্পগুলির কোনওটিই সমস্যার সমাধান করে না।

— গার্নার্ড

Answer 1

এর পরে যদি কারও সন্ধান করে তবে ক্রোমে সিএসএস রূপান্তরগুলিতে j দাগযুক্ত প্রান্তগুলি থেকে মুক্তি পাওয়ার জন্য একটি দুর্দান্ত কৌশল হ'ল সিএসএস সম্পত্তিটির -webkit-backface-visibilityমান সহ যুক্ত করা hidden। আমার নিজের পরীক্ষায়, এটি তাদের পুরোপুরি সরিয়ে দিয়েছে। আশা করি এইটি কাজ করবে.

-webkit-backface-visibility: hidden;

Comments

লাইফসেভার - এই কৌশলটি অ্যান্টি-এলিয়াসিং ইস্যুগুলির কারণে আমাদের পূর্বে আমরা রূপান্তর বন্ধ করতে বাধ্য হয়েছিল এমন বেশ কয়েকটি সাইটে পুনরায় সক্ষম করার অনুমতি দিয়েছি। ধন্যবাদ!

— ড্যারেন

এ সম্পর্কে কোনও সহায়তা: stackoverflow.com/questions/9235342/… ?

— 12:36 এনারীয়ার

এটি ক্রোমে কাজ করে তবে এটি তাদের আইওএস 6 এ আবার জাগ্রত করে তোলে!

— lazd

@ ল্যাজড এটি আইওএস অ্যাডে ঠিক করতেpadding: 1px; -webkit-background-clip: content-box;

— রব ফ্লেচার

@ রবফ্লেচার প্যাডিং এবং ব্যাকগ্রাউন্ড-ক্লিপ যুক্ত করেছেন যা এই থ্রেড অনুযায়ী ক্রস-ব্রাউজার এবং ক্রস-ওএস সমাধানের জন্য প্রয়োজনীয় seem এটি আমার ওএসএক্স / ক্রোম সমস্যাটিকেও ঠিক করে দেয় ... আমি মনে করি একটি সম্পূর্ণ সমাধান এরকম হবে: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

এটি ওয়েব-কিট-ব্যাকফেস-দৃশ্যমান বৈশিষ্ট্য বাদ দেওয়া অবস্থায় এমন পরিস্থিতিতে সহায়তা করবে বলে মনে হয়।

— ডিজিব্বস

আমার পক্ষে কাজ করে যখন অন্য কেউই করেনি। এই সম্পত্তি যুক্ত করার আগে, ক্রোম অ্যান্ড্রয়েডে সমস্যা ছিল। এখন সমস্ত ব্রাউজার সঠিকভাবে কাজ করছে বলে মনে হচ্ছে।

— বার্নি সম্মেলন

আইওএস 8. উপর সাফারিতে আমার জন্য কাজ করে

— মরটিজ ফ্রেডরিক

নিখুঁত সমাধান. অন্যরা কাজ করেনি। আমি প্রায় ছেড়ে দিয়েছি, এবং সন্দেহ হচ্ছে যে এটি কার্যকর হবে। তবে তা করে!

— গারকনিস

আমার প্রয়োজনের জন্য পুরোপুরি কাজ করে। আমি প্রকৃতপক্ষে ট্রানজিশনটি ব্যবহার করছি, এবং অন্যান্য উত্তরগুলি আমার পিএনজিটিকে তার ডিফল্ট অবস্থায় পিক্সिलेটেড করে তুলছে। আপনার উত্তরটি কোনও পিক্সিলাইজেশন সরিয়ে ফেলতে সহায়তা করেছে - উভয়ই ডিফল্ট অবস্থায় এবং সংক্রমণের সময়। পারফেক্ট!

— গারকনিস

Answer 3

1px স্বচ্ছ সীমানা যুক্ত করা অ্যান্টি-এলিয়জিংকে ট্রিগার করবে

outline: 1px solid transparent;

বিকল্পভাবে, 1px স্বচ্ছ বক্স-ছায়া যুক্ত করুন।

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

Comments

rgba (255, 255, 255, 0) সম্ভবত আরও ভাল

— মিমি

আপনার উত্তরে সিএসএসের শীর্ষ বিভাগটি যুক্ত করা এবং outline: 1px solid transparent;আমার পক্ষে ভাল কাজ করেছে। উপরের অন্যান্য সমাধানগুলি যথেষ্ট পরিমাণে কার্যকর হয়নি।

— টিমোথি জর্ন

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

সংরক্ষণ 3D আমার জীবন বাঁচায়।

— হ্যানস স্নাইডারমায়ার

Answer 5

নির্বাচিত উত্তর (বা অন্য কোনও উত্তর) আমার পক্ষে কাজ করে নি, তবে এটি করেছে:

img {outline:1px solid transparent;}

Answer 6

আমি সিএসএস 3 গ্রেডিয়েন্ট -45 ডিগ্রি সহ একটি সমস্যা পেয়েছি। backgroundতখন হেলে যাওয়া, খারাপভাবে খাঁজকাটা অনুরূপ কিন্তু আসল পোস্ট চেয়েও খারাপ ছিল। সুতরাং আমি উভয় সঙ্গে খেলা শুরু background-size। এটি কৌতুককে প্রসারিত করতে পারে, তবে এটি এখনও ছিল was তারপর ছাড়াও আমি পড়তে যে অন্যান্য ব্যক্তিদের সমস্যা খুব ভুগেন 45deg বাড়তি এ তাই আমি থেকে স্থায়ী -45degকরার -45.0001degএবং আমার সমস্যার সমাধান করা হয়।

আমার সিএসএসের নীচে, background-sizeপ্রাথমিকভাবে ছিল 30pxএবং degব্যাকগ্রাউন্ড গ্রেডিয়েন্টের জন্য ঠিক ছিল -45degএবং সমস্ত কীফ্রেমগুলি ছিল 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

ঝাপসা বাক্স-ছায়া ব্যবহার করে আপনি জ্যাগিংটি মাস্ক করতে সক্ষম হতে পারেন । বক্স-শ্যাডোর পরিবর্তে ওয়েবেকিট-বাক্স-ছায়া ব্যবহার করা নিশ্চিত করবে যে এটি অ-ওয়েবকিট ব্রাউজারগুলিকে প্রভাবিত করে না। আপনি যদিও সাফারি এবং মোবাইল ওয়েবকিট ব্রাউজারগুলি চেক করতে চাইতে পারেন।

ফলাফলটি কিছুটা ভাল, তবে অন্যান্য ব্রাউজারগুলির সাথে এরপরেও অনেক কম:

Answer 8

কেবল ভেবেছিলেন যে ক্রোম / উইন্ডোজে আমাদের ঠিক একই সমস্যা ছিল বলে আমরা আমাদের সমাধানটিও ফেলে দেব।

আমরা উপরের @ স্টেভেন ওয়াটকিন্সের মাধ্যমে সমাধানটি চেষ্টা করেছিলাম, তবে এখনও "পদক্ষেপ" পেয়েছি।

পরিবর্তে

-webkit-backface-visibility: hidden;

আমরা ব্যবহার করেছি:

-webkit-backface-visibility: initial;

আমাদের জন্য এই কৌশলটি করেছে 🎉

Answer 9

প্রশ্নটিতে উপাদানটিকে ঘিরে ডিভের উপর নিম্নলিখিতগুলি যুক্ত করা আমার জন্য এটি স্থির হয়েছে।

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

দাগযুক্ত প্রান্তগুলি আমার ক্ষেত্রে ভিডিও উইন্ডোটির চারপাশে হাজির ছিল।

Answer 10

আমার জন্য এটি সিএসএস সম্পত্তি দৃষ্টিকোণ যা কৌশলটি করেছিল:

-webkit-perspective: 1000;

আমার ক্ষেত্রে সম্পূর্ণ অযৌক্তিক যেহেতু আমি 3 ডি ট্রানজিশন ব্যবহার করি না, তবে তবুও কাজ করে।

Answer 11

ক্রোমে ক্যানভাসের জন্য (সংস্করণ 52)

সমস্ত তালিকাভুক্ত উত্তর চিত্র সম্পর্কে about তবে আমার সমস্যাটি ক্রোম (v.52) এর ট্রান্সফর্ম রোটেটের ক্যানভাস সম্পর্কে। তারা ঠাট্টা হয়ে গেছে এবং এই সমস্ত পদ্ধতি সাহায্য করতে পারে না।

আমার জন্য কাজ করে এমন সমাধান:

1. প্রতিটি পক্ষের জন্য 1 পক্সে ক্যানভাস বড় করুন => প্রস্থ এবং উচ্চতার জন্য +2 পিক্স;
2. অফসেট + 1 পিএক্স (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/

দ্রষ্টব্য: নেস্টেড ডিভগুলি অনেক আছে কারণ এটি আমার প্রকল্পের সরলীকৃত সংস্করণ।

---

আমার ইস্যুটি ফায়ারফক্সের জন্যও পুনরুত্পাদন করা হয় । রেটিনা সহ সাফারি এবং এফএফ-তে এ জাতীয় কোনও সমস্যা নেই।

এবং অন্যান্য প্রতিষ্ঠিত সমাধান হ'ল ক্যানভাসকে একই আকারের ডিভের মধ্যে স্থাপন করা এবং এই ডিভের জন্য নিম্নলিখিত সিএসএস প্রয়োগ করুন:

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

এবং এই মোড়কের ডিভিতে রোটেশন প্রয়োগ করা উচিত। সুতরাং তালিকাভুক্ত সমাধান কাজ করা হয় তবে ছোট পরিবর্তন দ্বারা।

এবং এই জাতীয় সমাধানের জন্য পরিবর্তিত উদাহরণ হ'ল: https://jsfizz.net/tLbxgusx/2/

দ্রষ্টব্য: বিভাগ 'তৃতীয়' সহ ডিভের শৈলী দেখুন।