ข้อความไม่ชัดหลังจากใช้ CSS transform: scale (); ใน Chrome

ดูเหมือนว่ามีการอัปเดตล่าสุดสำหรับ 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ใน Chrome คุณจะเห็นปัญหาในพื้นที่ข้อความหลัก ไม่เคยทำเช่นนี้และดูเหมือนจะไม่มีผลกับเบราว์เซอร์ webkit อื่น ๆ (เช่น Safari) มีโพสต์อื่น ๆ เกี่ยวกับผู้ที่ประสบปัญหาคล้ายกันกับการแปลง 3 มิติ แต่ไม่พบอะไรเกี่ยวกับการแปลง 2 มิติเช่นนี้

ความคิดใด ๆ ที่จะได้รับการชื่นชมขอบคุณ!

ฉันมีปัญหานี้หลายครั้งและดูเหมือนจะมี 2 วิธีในการแก้ไข (แสดงด้านล่าง) คุณสามารถใช้คุณสมบัติเหล่านี้เพื่อแก้ไขการแสดงผลหรือทั้งสองอย่างพร้อมกัน

การมองเห็นด้านหลังที่ซ่อนอยู่ช่วยแก้ปัญหาได้เนื่องจากทำให้ภาพเคลื่อนไหวง่ายขึ้นเพียงด้านหน้าของวัตถุในขณะที่สถานะเริ่มต้นคือด้านหน้าและด้านหลัง

backface-visibility: hidden;

TranslateZ ยังทำงานได้เนื่องจากเป็นการแฮ็กเพื่อเพิ่มการเร่งฮาร์ดแวร์ให้กับภาพเคลื่อนไหว

transform: translateZ(0);

คุณสมบัติทั้งสองนี้แก้ไขปัญหาที่คุณพบ แต่บางคนก็ชอบเพิ่ม

-webkit-font-smoothing: subpixel-antialiased;

เพื่อเคลื่อนไหวเป็นวัตถุ ฉันพบว่ามันสามารถเปลี่ยนการแสดงผลของแบบอักษรของเว็บได้ แต่อย่าลังเลที่จะทดลองใช้วิธีนั้นด้วย

เพื่อปรับปรุงความเบลอโดยเฉพาะ บน Chrome ลองทำสิ่งนี้:

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

อัปเดต: Perspectiveจะเพิ่มระยะห่างระหว่างผู้ใช้กับระนาบ z ซึ่งในทางเทคนิคแล้วการปรับขนาดวัตถุทำให้ความเบลอดูเหมือน 'ถาวร' perspective(1px)ข้างต้นเป็นเหมือนเป็ดเทปเพราะเรากำลังจับคู่เบลอของเรากำลังพยายามที่จะแก้ปัญหา คุณอาจโชคดีกว่ากับ css ด้านล่าง:

transform: translateZ(0);
backface-visibility: hidden;

ฉันพบว่าการปรับอัตราส่วนมาตราส่วนช่วยได้เล็กน้อย

การใช้scale(1.048)over (1.05)ดูเหมือนจะสร้างการประมาณที่ดีกว่าให้กับขนาดตัวอักษรทั้งพิกเซลลดการเบลอของพิกเซลย่อย

ฉันยังใช้translateZ(0)สิ่งที่ดูเหมือนจะปรับขั้นตอนการปัดเศษสุดท้ายของ Chrome ในภาพเคลื่อนไหวการแปลงร่าง นี่เป็นข้อดีสำหรับการใช้งานในทุก ๆ ครั้งของฉันเพราะมันเพิ่มความเร็วและลดเสียงรบกวน อย่างไรก็ตามสำหรับฟังก์ชั่น onclick ฉันจะไม่ใช้มันเพราะแบบอักษรที่แปลงแล้วดูเหมือนจะไม่กรอบ

หลังจากที่พยายามทุกอย่างอื่นที่นี่โชคไม่สิ่งที่ในที่สุดก็แก้ไขปัญหานี้สำหรับฉันถูกลบwill-change: transform;คุณสมบัติ ด้วยเหตุผลบางประการทำให้การปรับขนาดใน Chrome พร่ามัวอย่างน่ากลัว แต่ไม่ใช่ Firefox

แทน

transform: scale(1.5);

การใช้

zoom : 150%;

แก้ไขปัญหาข้อความเบลอใน Chrome

สิ่งนี้ต้องเป็นข้อบกพร่องของ Chrome (เวอร์ชัน 56.0.2924.87) แต่ด้านล่างนี้จะแก้ไขความเบลอให้กับฉันเมื่อเปลี่ยนคุณสมบัติ css ในคอนโซล ('. 0') ฉันจะรายงานมัน

filter: blur(.0px)

Sunderls นำฉันไปสู่คำตอบ ได้รับการยกเว้นfilter: scaleไม่อยู่ แต่filter: blurไม่

ใช้การประกาศถัดไปกับองค์ประกอบที่ดูเบลอ (ในกรณีของฉันพวกเขาอยู่ในองค์ประกอบที่ถูกแปลง):

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

มันเกือบจะทำงานอย่างสมบูรณ์ " เกือบ " เพราะฉันใช้การเปลี่ยนแปลงและในระหว่างการเปลี่ยนแปลงองค์ประกอบต่างๆดูไม่สมบูรณ์แบบ แต่เมื่อทำการเปลี่ยนแปลงเสร็จแล้วก็จะทำ

ฉันพบว่าปัญหาเกิดขึ้นกับการแปลงแบบสัมพัทธ์ไม่ว่าด้วยวิธีใดก็ตาม translateX (50%) สเกล (1.1) หรืออะไรเลย การให้ค่าสัมบูรณ์ใช้ได้ผลเสมอ (ไม่ทำให้ข้อความเบลอ (ures))

ไม่มีวิธีแก้ปัญหาใด ๆ ที่กล่าวถึงที่นี่และฉันคิดว่ายังไม่มีวิธีแก้ปัญหา (ใช้ Chrome 62.0.3202.94 ในขณะที่ฉันเขียนสิ่งนี้)

ในกรณีของฉันtransform: translateY(-50%) translateX(-50%)ทำให้ภาพเบลอ (ฉันต้องการจัดให้กล่องโต้ตอบอยู่ตรงกลาง)

ในการเข้าถึงมากขึ้นอีกนิด "แน่นอน" transform: translateY(-50.09%) translateX(-50.09%)คุณค่าผมมีชุดค่าทศนิยม

บันทึก

ฉันค่อนข้างแน่ใจว่าค่านี้แตกต่างกันไปตามขนาดหน้าจอที่แตกต่างกัน ฉันแค่อยากจะแบ่งปันประสบการณ์ของฉันเผื่อว่ามันจะช่วยใครสักคนได้

ฉันพบวิธีแก้ปัญหาที่ดีและสะอาดกว่ามาก:

.element{
 transform:scale(0.5) 
 transform-origin: 100% 0;
}

หรือ

.element{
 transform:scale(0.5) 
 transform-origin: 0% 0;
}

ขอบคุณโพสต์นี้: ป้องกันการเรนเดอร์เบลอด้วย transform: scale

การเพิ่มperspective(1px)ได้ผลสำหรับฉัน

transform: scale(1.005);

ถึง

transform: scale(1.005) perspective(1px);

ลองใช้zoom: 101%;สำหรับการออกแบบที่ซับซ้อนเมื่อคุณไม่สามารถใช้การซูม + มาตราส่วนร่วมกันได้

ในกรณีของฉันรหัสต่อไปนี้ทำให้แบบอักษรไม่ชัด:

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

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

zoom: 97%;   

วิธีแก้ไขอีกอย่างที่ฉันเพิ่งพบสำหรับการแปลงที่ไม่ชัดเจน (translate3d, scaleX) บน Chrome คือการตั้งค่าองค์ประกอบเป็น " display: inline-table ;" ดูเหมือนว่าจะบังคับให้มีการปัดเศษพิกเซลในบางกรณี (บนแกน X)

ฉันอ่านการวางตำแหน่งพิกเซลย่อยภายใต้ Chrome แล้วและ devs จะไม่แก้ไข

การอัปเดต 2019
ข้อบกพร่องในการแสดงผลของ Chrome ยังคงไม่ได้รับการแก้ไขและแม้ว่าจะไม่ใช่ความผิดของลูกค้า แต่ก็ไม่มีคำแนะนำใด ๆ ที่นำเสนอในเว็บไซต์ทั้งหมดนี้เพื่อช่วยในการแก้ไขปัญหา ฉันสามารถเห็นได้ว่าฉันได้ลองทุก ๆ อันโดยเปล่าประโยชน์: มีเพียง 1 เท่านั้นที่เข้ามาใกล้และนั่นคือกฎ css: filter: เบลอ (0); ซึ่งกำจัดการขยับของคอนเทนเนอร์ 1px แต่ไม่ได้แก้ไขข้อบกพร่องการแสดงผลเบลอของคอนเทนเนอร์เองและเนื้อหาใด ๆ ที่อาจมี

นี่คือความจริง: ไม่มีการแก้ไขปัญหานี้อย่างแท้จริงดังนั้นนี่คือวิธีแก้ปัญหาสำหรับเว็บไซต์ที่ลื่นไหล

กรณี
นี้ฉันกำลังพัฒนาเว็บไซต์ที่ลื่นไหลและมี 3 div ทั้งหมดอยู่กึ่งกลางด้วยเอฟเฟกต์โฮเวอร์และการแชร์ค่าเปอร์เซ็นต์ทั้งในด้านความกว้างและตำแหน่ง ข้อบกพร่องของ Chrome เกิดขึ้นที่คอนเทนเนอร์ตรงกลางซึ่งตั้งค่าไว้ทางซ้าย: 50%; และแปลง: translateX (-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>

นี่คือ CSS ที่เกิดข้อผิดพลาดของ Chrome ...

*{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%;}

นี่คือ css คงที่ ...

*{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/

ดังที่คุณเห็นการปรับแต่ง CSS เล็กน้อยควรลดหรือกำจัดข้อกำหนดในการใช้การแปลงสำหรับการกำหนดตำแหน่ง สิ่งนี้สามารถใช้ได้กับเว็บไซต์ที่มีความกว้างคงที่เช่นเดียวกับของไหล

ฉันมีปัญหาเดียวกันนี้ ฉันแก้ไขสิ่งนี้โดยใช้:

.element {
  display: table
}

วิธีแก้ปัญหาของฉันคือ:

แสดง: เริ่มต้น;

จากนั้นก็จะกรอบคม

ไม่มีข้อใดที่ใช้ได้ผลสำหรับฉัน ฉันมีภาพเคลื่อนไหวนี้สำหรับป๊อปอัป:

@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;แม้ว่าจะถูกทำเครื่องหมายว่าไม่ได้ใช้ในตัวตรวจสอบ Chrome

ข้างต้นไม่ได้ผลสำหรับฉัน

มันใช้ได้ผลเมื่อฉันเพิ่มมุมมอง

คือจาก

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

ฉันเปลี่ยนเป็น

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

ฉันแก้ไขกรณีของฉันโดยเพิ่ม:

transform: perspective(-1px)

สำหรับ CHORME:

ฉันได้ลองคำแนะนำทั้งหมดที่นี่ แต่ไม่ได้ผล วิทยาลัยของฉันพบวิธีแก้ปัญหาที่ยอดเยี่ยมซึ่งทำงานได้ดีขึ้น:

คุณไม่ควรปรับขนาดเกิน 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);
}

ฉันใช้คำตอบทั้งหมดรวมกันและนี่คือสิ่งที่ได้ผลสำหรับฉันในตอนท้าย:

.modal .modal--transition {
  display: inline-table;
  transform: perspective(1px) scale(1) translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}

ฉันกำลังเผชิญปัญหาข้อความตาพร่าบน Chrome แต่ไม่ได้อยู่ใน Firefox transform: translate(-50%,-50%)เมื่อฉันใช้

ฉันได้ลองวิธีแก้ปัญหามากมายเช่น:

transform: perspective(1px);

filter: blur(0);

transform: translateZ(0);

backface-visibility: hidden;

สิ่งเหล่านี้ไม่ได้ผลกับฉัน

สุดท้ายฉันกำหนดความสูงและความกว้างขององค์ประกอบให้เท่ากัน มันแก้ปัญหาให้ฉันได้ !!!

บันทึก:อาจขึ้นอยู่กับกรณีการใช้งานจนถึงกรณีการใช้งาน แต่ก็คุ้มค่าที่จะลอง!

ฉันได้ลองใช้ตัวอย่างมากมายจากคำตอบเหล่านี้น่าเสียดายที่ไม่มีอะไรช่วยสำหรับ Chrome Version 81.0.4044.138 ฉันได้เพิ่มการเปลี่ยนองค์ประกอบแทน

 transform-origin: 50% 50%;

อันนี้

 transform-origin: 51% 51%;

มันช่วยสำหรับฉัน

transformStyle: preserve-3dสำหรับผมปัญหาคือการที่องค์ประกอบของฉันถูกใช้ ฉันตระหนักว่าสิ่งนี้ไม่จำเป็นสำหรับแอปจริง ๆ และการลบออกจะช่วยแก้ไขความเบลอ

ฉันลบสิ่งนี้ออกจากรหัสของฉัน - transform-style: preserve-3d; และเพิ่มสิ่งนี้ - transform: perspective(1px) translateZ(0);

ความเบลอหายไป!

ใน Chrome 74.0.3729.169 ปัจจุบัน ณ วันที่ 5-25-19 ดูเหมือนจะไม่มีการแก้ไขใด ๆ สำหรับการเบลอที่เกิดขึ้นในระดับการซูมของเบราว์เซอร์บางระดับที่เกิดจากการเปลี่ยนแปลง แม้แต่องค์ประกอบง่ายๆTransformY(50px)ก็จะเบลอองค์ประกอบ สิ่งนี้ไม่เกิดขึ้นใน Firefox, Edge หรือ Safari เวอร์ชันปัจจุบันและดูเหมือนว่าจะไม่เกิดขึ้นในทุกระดับการซูม

มันจะยากที่จะแก้ด้วย css เท่านั้น

ก็เลยแก้ด้วย 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);
    }
})}

เพียงเพื่อเพิ่มความนิยมในการแก้ไขการวาง {border: 1px solid # ???} ไว้รอบ ๆ วัตถุที่ดูไม่ดีก็ช่วยแก้ปัญหาให้ฉันได้ ในกรณีที่คุณมีสีพื้นหลังที่คงที่ให้พิจารณาสิ่งนี้ด้วย นี่เป็นเรื่องที่ไม่มีใครคิดเกี่ยวกับการพูดถึงฉันเดาว่าเอ๊ะเอ๊ะ

คุณสามารถใช้ css filterเพื่อแก้ไขปัญหานี้

.element {
    filter: blur(0);
}

เกี่ยวกับคำนำหน้าผู้ขายโปรดดำเนินการด้วยตัวเอง -webkit-filter, -ms-filter. รายละเอียดอยู่ที่นี่ http://browser.colla.me/show/css_transformation_scale_cause_blurring

ข้อความจะไม่พร่ามัวหากคุณไม่transitionใช้transform.

เพียงทำสิ่งนี้:

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

โดยไม่มีการเปลี่ยนแปลงเช่น transition: all .2s;