ภาพเคลื่อนไหวเมื่อวางเมาส์ - ปัญหาความทึบของโครเมียม

ดูเหมือนจะมีปัญหากับหน้าของฉันที่นี่: http://www.lonewulf.eu

เมื่อวางเมาส์เหนือภาพขนาดย่อรูปภาพจะเลื่อนไปทางขวาเล็กน้อยและจะเกิดขึ้นใน Chrome เท่านั้น

css ของฉัน:

.img{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter:alpha(opacity=50);
    -moz-opacity: 0.5; 
    opacity: 0.5;
    -khtml-opacity: 0.5;
    display:block;
    border:1px solid #121212;
}
.img:hover{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter:alpha(opacity=100);
    -moz-opacity: 1; 
    opacity: 1;
    -khtml-opacity: 1;  
    display:block;
}

อีกวิธีหนึ่งคือการใช้

-webkit-backface-visibility: hidden;

บนองค์ประกอบโฮเวอร์ที่มีความทึบ Backface-visibility เกี่ยวข้องtransformด้วยดังนั้น@Beskowจึงมีบางอย่างที่เกี่ยวข้อง เนื่องจากเป็นปัญหาเฉพาะของ webkit คุณจึงต้องระบุเฉพาะ backface-visibility สำหรับ webkit มีอื่น ๆ ที่มีคำนำหน้าของผู้ขาย

ดูhttp://css-tricks.com/almanac/properties/b/backface-visibility/สำหรับข้อมูลเพิ่มเติม

ด้วยเหตุผลบางประการ Chrome จึงตีความตำแหน่งขององค์ประกอบโดยไม่มีความทึบเป็น 1 ในลักษณะที่ต่างออกไป หากคุณใช้แอตทริบิวต์ CSS position:relativeกับองค์ประกอบ a.img ของคุณจะไม่มีการเคลื่อนไหวซ้าย / ขวาอีกต่อไปเนื่องจากความทึบจะแตกต่างกันไป

ฉันมีปัญหาเดียวกันฉันแก้ไขด้วย css transform rotation แบบนี้:

-webkit-transform: rotate(0);
-moz-transform: rotate(0);
transform: rotate(0);

ทำงานได้ดีในเบราว์เซอร์หลัก ๆ

อีกวิธีหนึ่งที่แก้ไขปัญหานี้สำหรับฉันคือการเพิ่มกฎ:

will-change: opacity;

ในกรณีเฉพาะของฉันสิ่งนี้หลีกเลี่ยงปัญหาการกระโดดพิกเซลที่คล้ายกันซึ่งเกิดขึ้นtranslateZ(0)ใน Internet Explorer แม้ว่าจะแก้ไขสิ่งต่างๆใน Chrome แล้วก็ตาม

ส่วนใหญ่ของการแก้ปัญหาอื่น ๆ ที่แนะนำที่นี่ที่เกี่ยวข้องกับการแปลง (เช่น. translateZ(0), rotate(0), translate3d(0px,0px,0px)ฯลฯ ) การทำงานโดยการมอบภาพวาดขององค์ประกอบมากกว่ากับ GPU ที่ช่วยให้การแสดงผลที่มีประสิทธิภาพมากขึ้นwill-changeให้คำใบ้ถึงเบราว์เซอร์ที่น่าจะมีเอฟเฟกต์คล้าย ๆ กัน (ช่วยให้เบราว์เซอร์แสดงการเปลี่ยนแปลงได้อย่างมีประสิทธิภาพมากขึ้น) แต่รู้สึกแฮ็คน้อยลง (เนื่องจากเป็นการแก้ไขปัญหาอย่างชัดเจนแทนที่จะเพียงแค่สะกิดเบราว์เซอร์เพื่อใช้ GPU)

ต้องบอกว่าควรระลึกไว้เสมอว่าการรองรับเบราว์เซอร์นั้นไม่ดีเท่าwill-change(แม้ว่าปัญหาจะเกิดขึ้นกับ Chrome เท่านั้นนี่อาจเป็นสิ่งที่ดี!) และในบางสถานการณ์อาจทำให้เกิดปัญหาของตัวเองได้ แต่ก็ยัง เป็นอีกวิธีหนึ่งที่เป็นไปได้สำหรับปัญหานี้

ฉันต้องใช้ทั้งสองอย่างbackface-visibilityและtransformกฎเพื่อป้องกันความผิดพลาดนี้ แบบนี้:

a     {-webkit-transform: rotate(0);}
a img {-webkit-backface-visibility: hidden;}

ฉันมีปัญหาคล้ายกันกับตัวกรอง (ไม่ทึบ) เมื่อวางเมาส์เหนือ แก้ไขโดยการเพิ่มกฎในคลาสพื้นฐานด้วย:

filter: brightness(1.01);

backface-visibility (หรือ -webkit-backface-visibility) แก้ไขปัญหาใน Chrome ให้ฉันเท่านั้น ในการแก้ไขทั้งใน Firefox และ Chrome ฉันใช้ชุดค่าผสมของคำตอบข้างต้นต่อไปนี้

//fixes image jiggle issue, please do not remove
img {
  -webkit-backface-visibility: hidden; //Webkit fix
  transform: translate3d(0px,0px,0px); //Firefox fix
}

ฉันพบปัญหาที่คล้ายกันใน Safari 8.0.2 ซึ่งรูปภาพจะกระวนกระวายใจเมื่อเปลี่ยนความทึบ การแก้ไขที่โพสต์ไว้ที่นี่ไม่ได้ผลอย่างไรก็ตามสิ่งต่อไปนี้ทำ:

-webkit-transform: translateZ(0);

เครดิตทั้งหมดสำหรับคำตอบนี้ผ่านคำตอบที่ตามมานี้

ฉันพบปัญหานี้กับรูปภาพในตารางแต่ละภาพซ้อนอยู่ในที่มีการประกาศ display: inline-block วิธีแก้ปัญหาที่ Jamland โพสต์ไว้ข้างต้นทำงานเพื่อแก้ไขปัญหาเมื่อจอแสดงผล: inline-block; ถูกประกาศในองค์ประกอบหลัก

ฉันมีตารางอื่นที่รูปภาพอยู่ในรายการที่ไม่เรียงลำดับและฉันสามารถประกาศ display: block; และความกว้างของรายการหลักและประกาศ backface-visibility: hidden; บนองค์ประกอบภาพและดูเหมือนว่าจะไม่มีการเลื่อนตำแหน่งใด ๆ ในการวางเมาส์

li { width: 33.33333333%; display: block; }
li img { backface-visibility: hidden; }

วิธีแก้ปัญหาalpipegoให้บริการฉันในปัญหานี้ ใช้-webkit-backface-visibility: hidden; กับภาพนี้โดยไม่มีการเคลื่อนย้ายในการเปลี่ยนความทึบของโฮเวอร์

/* fix error hover image opacity*/
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;

ฉันมีปัญหากับวิธีแก้ปัญหาอื่น ๆ ทั้งหมดที่นี่เนื่องจากพวกเขาต้องการการเปลี่ยนแปลง CSS ที่อาจทำลายสิ่งอื่น ๆ - ตำแหน่ง: สัมพัทธ์ต้องการให้ฉันคิดใหม่ทั้งหมดว่าฉันวางตำแหน่งองค์ประกอบของฉันอย่างไรการเปลี่ยน: หมุน (0) สามารถรบกวนสิ่งที่มีอยู่ แปลงและให้เอฟเฟกต์การเปลี่ยนแปลงเล็ก ๆ น้อย ๆ เมื่อฉันตั้งค่าระยะเวลาการเปลี่ยนภาพและการมองเห็นด้านหลังจะไม่ทำงานหากฉันต้องการแบ็คเฟซจริง ๆ (และต้องใช้คำนำหน้าจำนวนมาก)

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

opacity:0.99999999;

หลังจากทำเครื่องหมายคำตอบของ Rick Giner ว่าถูกต้องแล้วฉันก็พบว่ามันไม่สามารถแก้ไขปัญหาได้

ในกรณีของฉันฉันมีภาพความกว้างที่ตอบสนองอยู่ภายใน div ความกว้างสูงสุด เมื่อความกว้างของไซต์ข้ามความกว้างสูงสุดแล้วรูปภาพจะเลื่อนไปที่โฮเวอร์ (โดยใช้การแปลง css)

การแก้ไขในกรณีของฉันคือเพียงแค่แก้ไขความกว้างสูงสุดเป็นผลคูณของสามสามคอลัมน์ในกรณีนี้และแก้ไขได้อย่างสมบูรณ์แบบ

ฉันสังเกตว่าคุณมีความทึบรวมอยู่ใน CSS ของคุณ ฉันมีปัญหาเดียวกันกับ Chrome (ภาพที่เลื่อนเมาส์ไปวาง) .. ทั้งหมดที่ฉันทำคือปิดการใช้งานความทึบและได้รับการแก้ไขไม่มีภาพเคลื่อนไหวอีกต่อไป

.yourclass:hover {
  /* opacity: 0.6; */
}

มีปัญหาเดียวกันการแก้ไขของฉันกำลังวางคลาสไว้หน้า src ในแท็บ img