css এসড সিএসএস রূপান্তর, ক্রোম মধ্যে jagged প্রান্ত




সিএসএস পজিশন (9)

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

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

ঘূর্ণিত ছবি এবং পাঠ্য নিজেকে সূক্ষ্ম দেখায়, এটি শুধুমাত্র সীমানা যা জাগেজ দেখায়।

আমি ব্যবহার করি সিএসএস এই হল:

.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 */
}

আমি কি এটিকে ঠিক করতে পারি, যেমন ক্রোমকে AA ব্যবহার করতে বাধ্য করে?

নিচের উদাহরণঃ


শুধু চিন্তা করেছিলাম যে আমরা আমাদের সমাধানটিও নিক্ষেপ করবো কারণ Chrome / Windows এ আমাদের একই সমস্যা ছিল।

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

পরিবর্তে

-webkit-backface-visibility: hidden;

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

-webkit-backface-visibility: initial;

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


আপনি transition পরিবর্তে transition ব্যবহার করছেন, -webkit-backface-visibility: hidden; কাজ করে না. একটি jagged প্রান্ত একটি স্বচ্ছ PNG ফাইলের জন্য অ্যানিমেশন সময় প্রদর্শিত হবে।

এটি সমাধান করার জন্য আমি ব্যবহার করেছি: outline: 1px solid transparent;


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

-webkit-backface-visibility: hidden;

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

outline: 1px solid transparent;

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

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

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

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

Chrome এর ক্যানভাসের জন্য (সংস্করণ 52)

সমস্ত তালিকাভুক্ত তালিকা ছবি সম্পর্কে। কিন্তু আমার সমস্যা ক্রোম রূপান্তর সঙ্গে ক্রোম (v.52) ক্যানভাস সম্পর্কে। তারা jagged হয়ে ওঠে এবং এই সব পদ্ধতি সাহায্য করতে পারে না।

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

  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/

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

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

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

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

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

এবং যেমন সমাধান জন্য সংশোধিত উদাহরণ: https://jsfiddle.net/tLbxgusx/2/

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


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

img {outline:1px solid transparent;}


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

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

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


3 ডি রূপান্তর চেষ্টা করুন। এটি একটি যাদুমন্ত্র মত কাজ করে!

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




antialiasing