css transform, ขอบหยักในโครเมี่ยม


193

ฉันใช้ CSS3 แปลงเพื่อหมุนรูปภาพและกล่องข้อความที่มีเส้นขอบในเว็บไซต์ของฉัน

ปัญหาคือว่ารูปลักษณ์ของเส้นขอบขรุขระใน Chrome เช่นเกม (ความละเอียดต่ำ) โดยไม่มีการต่อต้านนามแฝง ใน IE, Opera และ FF มันดูดีขึ้นมากเพราะใช้ AA (ซึ่งยังคงมองเห็นได้ชัดเจน แต่ก็ไม่เลว) ฉันไม่สามารถทดสอบ Safari ได้เพราะฉันไม่ได้เป็นเจ้าของ Mac

ภาพถ่ายและข้อความที่หมุนเองนั้นดูดีมันเป็นเพียงเส้นขอบที่ดูขรุขระ

CSS ที่ฉันใช้คือ:

.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 หรือไม่

ตัวอย่างด้านล่าง:

ตัวอย่างขอบหยัก


สำหรับผู้ที่อ่านในภายหลัง: ควรได้รับการแก้ไขใน Chrome ตั้งแต่เวอร์ชัน 15 (พ.ย. 2554) แต่ Safari ได้แนะนำปัญหาเดียวกันใน 5.1 สำหรับ Mac ซึ่งยังไม่ได้รับการแก้ไขในขณะนี้
dtech

และพวกเขาซ่อมมันได้ดีมากการกลับไปเป็นไปไม่ได้ เรามีกรณีที่การลดรอยหยักเป็นสิ่งสุดท้ายที่เราต้องการ แต่ตอนนี้ Chrome / Chromium / Safari ไม่มีวิธีปิดการลดรอยหยักในรูปภาพที่ถูกแปลงแม้ว่าพวกเขาจะเป็นภาพขนาด 1 บิต (เช่น b / w gif) เบลอเท่มากเท่มากเบลอยิ่งเท่ห์มากขึ้นเขาพูด! วิธีเดียวที่จะทำให้แน่ใจว่าขอบคมชัดคือการแปลงทั้งหมดเป็นพา ธ svg หรือวัตถุและเพิ่มคุณสมบัติการแสดงผลรูปร่าง = "crispEdges"
Timo Kähkönen

สำหรับฉันปัญหาอยู่ที่เส้นขอบโปร่งใสที่ใช้ในการสร้างลูกศร นี่คือใน Chrome 40 สำหรับ win และ mac ไม่มีตัวเลือกใด ๆ ที่นี่แก้ไขปัญหาได้
Gurnard

คำตอบ:


389

ในกรณีที่ทุกคนกำลังค้นหาสิ่งนี้ในภายหลังเคล็ดลับที่ดีในการกำจัดขอบขรุขระบนการแปลง CSS ใน Chrome คือการเพิ่มคุณสมบัติ CSS -webkit-backface-visibilityhiddenที่มีค่าของ ในการทดสอบของฉันเองสิ่งนี้ทำให้พวกเขาราบรื่น หวังว่าจะช่วย

-webkit-backface-visibility: hidden;

7
ผู้ช่วยชีวิต - เคล็ดลับนี้ช่วยให้เราสามารถเปิดใช้งาน -webkit- แปลงบนเว็บไซต์จำนวนมากที่ก่อนหน้านี้เราถูกบังคับให้ปิดการแปลงเนื่องจากปัญหาการต่อต้านนามแฝง ขอบคุณ!
Darren

ความช่วยเหลือเกี่ยวกับเรื่องนี้: stackoverflow.com/questions/9235342/… ?
abernier

5
ใช้งานได้ใน Chrome แต่มันทำให้ขรุขระอีกครั้งใน iOS 6!
lazd

11
@lazd เพื่อแก้ไขใน iOS เพิ่มpadding: 1px; -webkit-background-clip: content-box;
Rob Fletcher

2
@RobFletcher เพิ่มช่องว่างภายในและพื้นหลังคลิปซึ่งดูเหมือนว่าต่อเธรดนี้จำเป็นสำหรับ cross-browser และ cross-os solution นี่เป็นการแก้ไขปัญหา OSX / Chrome ของฉันด้วยดังนั้นฉันคิดว่าโซลูชันที่สมบูรณ์จะเป็นดังนี้:padding: 1px;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-background-clip:content-box;background-clip:content-box;
Benjamin Luoma

121

หากคุณกำลังใช้transitionแทนtransform, -webkit-backface-visibility: hidden;ไม่ทำงาน ขอบหยักจะปรากฏขึ้นระหว่างภาพเคลื่อนไหวสำหรับไฟล์ png แบบโปร่งใส

เพื่อแก้มันฉันใช้: outline: 1px solid transparent;


4
สิ่งนี้ดูเหมือนจะช่วยในสถานการณ์ที่เว็บ - แบ็กเอนด์ - มองเห็น - มองไม่เห็นคุณสมบัติ
dgibbs

2
เหมาะกับฉันเมื่อไม่มีคนอื่นทำ ก่อนเพิ่มคุณสมบัตินี้ Chrome Android มีปัญหา ตอนนี้เบราว์เซอร์ทั้งหมดดูเหมือนจะทำงานอย่างถูกต้อง
Bernie Sumption

ใช้งานได้กับฉันใน Safari บน iOS 8
Moritz Friedrich

โซลูชั่นที่สมบูรณ์แบบ คนอื่นไม่ทำงาน ฉันเกือบยอมแพ้และสงสัยว่าสิ่งนี้จะใช้ได้ แต่มัน!
Garconis

1
ทำงานได้อย่างสมบูรณ์แบบสำหรับความต้องการของฉัน ฉันใช้การเปลี่ยนแปลงจริง ๆ และคำตอบอื่น ๆ ทำให้ PNG ของฉันกลายเป็นพิกเซลที่สถานะเริ่มต้น คำตอบของคุณช่วยลบการทำให้เป็นพิกเซลใด ๆ - ทั้งสถานะเริ่มต้นและระหว่างการเปลี่ยนแปลง ที่สมบูรณ์แบบ!
Garconis

24

การเพิ่มเส้นขอบโปร่งใส 1px จะกระตุ้นการลบรอยหยัก

outline: 1px solid transparent;

หรือเพิ่มเงากล่องโปร่งใส 1px

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

rgba (255, 255, 255, 0) น่าจะดีกว่า
mmm

4
การเพิ่มส่วนบนสุดของ CSS ในคำตอบของคุณและoutline: 1px solid transparent;ทำงานได้ดีสำหรับฉัน โซลูชันอื่น ๆ ข้างต้นทำงานได้ไม่ดีพอ
Timothy Zorn

outline: 1px solid transparent;ทริกเกอร์ anti-aliasing ยังอยู่ใน Firefox 52 (ที่มีปัญหาเดียวกันของ Chrome)
Luca Detomi

18

ลองเปลี่ยนรูปแบบ 3 มิติ มันใช้งานได้เหมือนมีเสน่ห์!

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

1
พยายามในโครเมี่ยมในขณะนี้ (สิงหาคม 2013 บน Mac) วิธีการแก้ปัญหาที่ยอมรับไม่ได้ทำงาน แต่ใช้นี้ (เฉพาะpreserve-3d; rotateยังสามารถใช้โดยไม่มีการเปลี่ยนแปลงไปrotateZ) ไม่
เดฟ

Super hacky แต่ใช้ได้สำหรับฉัน ลองแม้แต่ระดับที่เล็กกว่าเช่น 0.05 เพื่อหลีกเลี่ยงการจัดแนวที่มองไม่เห็น
cpursley

รักษา -3 มิติช่วยชีวิตฉันไว้
Hannes Schneidermayer

8

คำตอบที่เลือก (หรือคำตอบอื่นใด) ไม่ได้ผลสำหรับฉัน แต่สิ่งนี้ทำ:

img {outline:1px solid transparent;}


2

ฉันมีปัญหากับการไล่ระดับสี CSS3 ด้วย -45deg backgroundเป๋ได้ไม่ดีขรุขระคล้ายกับ แต่เลวร้ายยิ่งกว่าโพสต์ต้นฉบับ background-sizeดังนั้นผมจึงเริ่มเล่นกับทั้ง สิ่งนี้จะยืดความขรุขระออกไป แต่ก็ยังอยู่ที่นั่น จากนั้นฉันอ่านว่าคนอื่นกำลังมีปัญหาด้วยการเพิ่มทีละ 45dd ดังนั้นฉันจึงปรับจาก-45degเป็น-45.0001degและปัญหาของฉันก็ถูกแก้ไข

ใน CSS ของฉันด้านล่างbackground-sizeเป็นคนแรก30pxและdegสำหรับการไล่ระดับสีพื้นหลังตรงและคีย์เฟรมทุกคน-45deg30px 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;
        }

1

คุณอาจจะสามารถที่จะสวมหน้ากาก jagging โดยใช้เบลอกล่องเงา การใช้ -webkit-box-shadow แทน box-shadow จะทำให้แน่ใจว่าจะไม่มีผลต่อเบราว์เซอร์ที่ไม่ใช่ webkit คุณอาจต้องการตรวจสอบ Safari และเว็บเบราว์เซอร์มือถือ

ผลลัพธ์ค่อนข้างดีกว่า แต่ก็ยังน้อยกว่าเมื่อเทียบกับเบราว์เซอร์อื่น:

ด้วยกล่องเงา (ด้านล่าง)


1

แค่คิดว่าเราจะแก้ปัญหาด้วยเช่นกันเพราะเรามีปัญหาเดียวกันกับ Chrome / Windows

เราลองวิธีแก้ปัญหาโดย @stevenWatkins ด้านบน แต่ยังมี "ก้าว"

แทน

-webkit-backface-visibility: hidden;

เราใช้:

-webkit-backface-visibility: initial;

สำหรับพวกเราแล้วสิ่งนี้เป็นการหลอกลวง🎉


1

การเพิ่มสิ่งต่อไปนี้ใน div รอบองค์ประกอบที่เป็นปัญหาได้แก้ไขสิ่งนี้ให้ฉัน

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

ขอบขรุขระปรากฏขึ้นรอบ ๆ หน้าต่างวิดีโอในกรณีของฉัน


0

สำหรับฉันมันเป็นคุณสมบัติ CSS ในมุมมองที่ทำเคล็ดลับ:

-webkit-perspective: 1000;

ไม่มีเหตุผลในกรณีของฉันอย่างสมบูรณ์ขณะที่ฉันใช้ช่วงการเปลี่ยนภาพ 3 มิติ แต่ใช้งานไม่ได้


0

สำหรับ Canvas ใน Chrome (รุ่น 52)

คำตอบที่ระบุไว้ทั้งหมดเป็นเรื่องเกี่ยวกับภาพ แต่ปัญหาของฉันเกี่ยวกับ canvas ใน chrome (v.52) ที่มีการหมุนแบบหมุน พวกเขากลายเป็นขรุขระและวิธีการทั้งหมดนี้ไม่สามารถช่วยได้

โซลูชันที่เหมาะกับฉัน:

  1. ทำให้ผืนผ้าใบใหญ่ขึ้นบน 1 px สำหรับแต่ละข้าง => +2 px สำหรับความกว้างและความสูง
  2. วาดภาพด้วยออฟเซ็ต + 1px (ในตำแหน่ง 1,1 แทน 0,0) และขนาดคงที่ (ขนาดของรูปภาพควรน้อยกว่าผืนผ้าใบ 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 ที่ซ้อนกันอยู่มากมายเพราะเป็นเวอร์ชั่นที่เรียบง่ายจากโปรเจคของฉัน


ปัญหานี้ทำซ้ำสำหรับ Firefoxสำหรับฉันด้วย ไม่มีปัญหาดังกล่าวใน Safari และ FF ที่มีเรตินา

และวิธีแก้ปัญหาอื่น ๆ ที่ก่อตั้งขึ้นคือการวางผืนผ้าใบเป็น div ขนาดเดียวกันและใช้ css ต่อไปนี้กับ div นี้:

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

และควรใช้การหมุนกับ div การตัดนี้ ดังนั้นวิธีการแก้ปัญหาที่ระบุไว้จะทำงาน แต่มีการปรับเปลี่ยนเล็กน้อย

และตัวอย่างที่แก้ไขแล้วสำหรับโซลูชันดังกล่าวคือ: https://jsfiddle.net/tLbxgusx/2/

หมายเหตุ: ดูรูปแบบของ div กับ class 'third'

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.