图像在悬停时移动 - 铬不透明度问题

Question

我的页面似乎存在问题: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;
}

Answer 1

另一种解决方案是使用

-webkit-backface-visibility: hidden;

在具有不透明度的悬停元素上.背面可见性与此有关transform,所以@Beskow与它有关.由于它是webkit特定问题,因此您只需指定webkit的背面可见性.还有其他供应商前缀.

有关详细信息,请参阅http://css-tricks.com/almanac/properties/b/backface-visibility/.

Answer 2

出于某种原因,Chrome以不同的方式解释不具有不透明度1的元素的位置.如果将CSS属性position:relative应用于a.img元素,则不再有左/右移动,因为它们的不透明度会有所不同.

Answer 3

我有同样的问题,我用css变换旋转修复它.像这样:

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

它在主流浏览器中运行良好.

Answer 4

解决这个问题的另一个解决方案是添加规则:

will-change: opacity;

在我的特殊情况下,这避免了translateZ(0)在Internet Explorer 中引入的类似像素跳跃问题,尽管在Chrome中修复了一些问题.

大多数其他解决方案的建议在这里涉及转换(例如translateZ(0),rotate(0),translate3d(0px,0px,0px)等),用人工元素的绘画转移到GPU,实现更有效的渲染工作.will-change提供了一个可能具有类似效果的浏览器提示(允许浏览器更有效地呈现转换),但感觉不那么苛刻(因为它明确地解决了问题,而不仅仅是轻推浏览器以使用GPU).

话虽如此,但值得注意的是,浏览器支持并不是那么好will-change(尽管问题只适用于Chrome,这可能是一件好事!),在某些情况下,它可能会引入自己的问题,但仍然,这是这个问题的另一种可能的解决方案.

Answer 5

我需要同时使用backface-visibility和transform规则来防止这种故障.像这样:

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

Answer 6

我在悬停时遇到类似的问题(非不透明度)过滤器.修复了通过向基类添加规则:

filter: brightness(1.01);

Answer 7

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
}

Answer 8

我在Safari 8.0.2中遇到了类似的问题,当不透明度转换时,图像会抖动.此处发布的修复程序均无效,但以下情况如下:

-webkit-transform: translateZ(0);

所有信贷这个答案通过此后续的答案