حركة الصورة عند التمرير: معالجة مشكلة العتامة في Chrome

أبلغ المستخدمون عن مشكلة في تحرك الصور قليلاً إلى اليمين عند التمرير، ولكن فقط في Chrome. تنشأ هذه المشكلة من استخدام العتامة للتحكم في شفافية الصورة.

فحص CSS

للتحقق من المشكلة، نقوم بفحص 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 على عناصر التمرير مع التعتيم. تؤثر هذه الخاصية على كيفية ظهور الوجه الخلفي للعنصر عند تحويله. في هذه الحالة، فإنه يعالج الحركة غير المقصودة الناجمة عن تغييرات العتامة في Chrome.

تطبيق الخاصية التالية على حالة التمرير:

-webkit-backface-visibility: hidden;

اعتبارات إضافية

خاصية -webkit-backface-visibility خاصة بمتصفحات WebKit، لذلك قد تحتاج إلى بادئات البائع للمحركات الأخرى. لمزيد من المعلومات الشاملة، راجع وثائق CSS-Tricks.