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的背面可见性。还有其他vendor prefixes。

有关详细信息，请参阅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）。

话虽如此，但值得注意的是，browser support对于will-change来说并不是那么好（尽管问题只适用于Chrome，那么这可能是一件好事！），在某些情况下，它可以引入problems of its own，但它仍然是解决此问题的另一种可能的解决方案。

Answer 5

我需要同时应用backface-visibility和transform规则来防止此故障。像这样：

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

Answer 6

我在悬停时遇到类似的问题（非不透明度）过滤器。修复了通过以下方法向基类添加规则：

  <main>

<div class="container">
<ul>  
  <li class="one"> 
  </li>
  <li class="two"> </li>
  <li class="three"></li>
  <li class="four"></li>
</ul>

  <div class="nav">
      <ul >
       <li class="first active"> </li>
      <li class="second"> </li>
       <li class="third"> </li>
      <li class="fourth"> </li>
      </ul>
  </div>
</div>
</ul>
</main>


 <script>
  $(".nav > ul li").click(function () {
        $('.nav > ul li').each(function () {
            $(this).removeClass('active');       
        });
        var index = $(this).index();
        $(".container > ul").find("li").each(function (i2) {
            if (index == $(this).index())
                $(this).show();
            else
                $(this).hide();
        });
        $(this).addClass('active');
    });



 </script>

   <style>
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}



ul {
  list-style:none;
  height:100%;
}
main, html, body{
  height:100%;
}

.container {
  height:100%;
  postion:relative;

}

.one {  
   height:100%;   background:url(http://hamderser.dk/blog/images/clairvoyant/clairvoyant-nature-nature2.jpg) center center no-repeat fixed; 
   background-size:cover;

}  

.two {
  background: url(http://www.atilaminates.com/wp-content/uploads/2015/05/nature-wlk.jpeg) center center no-repeat fixed;
  height:100%; 
}
.three {
  background: url(http://php.drishinfo.com/photostudioone/wp-content/uploads/2014/11/nature-wallpaper-hd-1920x1080.jpg) center center no-repeat fixed;
  height:100%; 
}
.four {
  background: url(http://www.projecthappyhearts.com/wp-content/uploads/2015/04/green-nature-dual-monitor-other.jpg) center center no-repeat fixed;
  height:100%; 
}


.nav ul li {
  width:20px;
  background-color:white;
  height:20px;
  display:inline-block;
  margin-right:20px; 
}
.nav ul li:last-child {
  margin-right:0px;
}

.nav {
  position: absolute;
  bottom:100px;
  left:50%;
  transform:translate(-50%,-50%);
}

.nav ul .active{
  background-color:black;
}

.two, .three, .four {
  display:none;
}


  </style>

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);

通过this answer

全部归功于this subsequent answer

Answer 9

我遇到了这个问题，网格中的图像每个图像都嵌套在一个显示的内容中：声明了内联块。 Jamland上面发布的解决方案在显示时纠正了问题：inline-block;是在父元素上声明的。

我有另一个网格，图像在无序列表中，我能够声明display：block;和父列表项上的宽度并声明backface-visibility：hidden;在图像元素上，悬停时似乎没有任何位置偏移。

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

Answer 10

解决方案 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;

Answer 11

我在这里遇到了所有其他解决方案的问题，因为它们需要更改可能会破坏其他内容的CSS - 位置：相对要求我完全重新思考我如何定位我的元素，转换：旋转（0 ）当我有一个转换持续时间设置时，它会干扰现有的变换并产生很小的过渡效果，如果我真的需要一个背面（并且需要大量的前缀），背面可见性不会起作用。） p>

我找到的最懒的解决方案是在我的元素上设置一个非常接近但不完全的不透明度1.这只是一个问题，如果不透明度为1，所以它不会去打破或干扰我的任何其他风格：

opacity:0.99999999;

Answer 12

将Rick Giner的回答标记为正确后，我发现它没有解决问题。

在我的情况下，我有最大宽度div中包含的响应宽度图像。一旦站点宽度超过最大宽度，图像就会在悬停时移动（使用css变换）。

在我的情况下修复是在这种情况下简单地将最大宽度修改为三个，三列的倍数，并且它完美地修复了它。

Answer 13

我注意到你的CSS中包含了不透明度。我和Chrome有同样的问题（图像在悬停时移动）..我所做的就是禁用不透明度并且它已经解决，没有更多的图像移动。

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

Answer 14

有同样的问题，我的修复是将类放在img标签中的src之前。

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

14 个答案: