悬停跳跃问题上的Chrome CSS过渡不透明度

我正在尝试Chrome中最简单的不透明度转换，但我发现，虽然它通常是平滑的，但有时它会直接跳到不透明度：0或不透明度：1，而不进行转换

简化版，仅适用于webkit：

<style type="text/css">
    .box{
        background-color: #ff0000;
        width:100px;
        height:100px;
        -webkit-transition: opacity 1s;
   }
   .box:hover{
       opacity:0;
   }
</style>

<div class="box"></div>

.盒子{
背景色：#ff0000；
宽度：100px；
高度：100px；
-webkit转换：不透明度1s；
}
.box:悬停{
不透明度：0；
}

我发现让它出错的最好方法是翻滚，点击，翻滚，再次翻滚，等待它达到不透明度：0，然后慢慢地（逐像素）向下翻滚图像。当我这样做时，有一半的时间它会直接跳回不透明度：1，而不是平滑过渡

---

我是Windows7上的Chrome 45.0.2454.101 m。在同事的电脑上进行了测试，发现了相同的问题

---

这里有一段视频显示它出了问题。它一直工作到大约一半：

这里有一个更新的代码：

<style>
.box {
    background-color: #ff0000;
    width: 100px;
    height: 100px;
    opacity: 1;
    -webkit-transform: translateZ(0);
    -webkit-transition: opacity 1s ease-in-out;
}
.box:hover {
    opacity: 0;
}
</style>

<div class="box"></div>

.盒子{
背景色：#ff0000；
宽度：100px；
高度：100px；
不透明度：1；
-webkit转换：translateZ（0）；
-webkit转换：不透明度1s易入易出；
}
.box:悬停{
不透明度：0；
}

请注意添加到

.box

容器中的默认不透明度，这是一个缓和功能，通过使用转换声明可以实现默认硬件加速

---

请注意，我无法复制您的问题。这可能是浏览器的问题。

这应该可以解决您的问题

$(".box").mouseenter(
  function(){
    $(this).animate({opacity:'0'},'1000')
  });
$(".box").mouseleave(
  function() {
    $(this).animate({opacity:'1'},'1000')
  });

---

同样在Windows 7上运行chrome 45.0.2454.101 m版，但在Windows 7上的meChrome 45.0.2454.101 m版不会发生这种情况-无法使用给定小提琴中提供的步骤重新创建问题。无法重新创建问题。无论如何，也许你可以使用-webkit转换：不透明度1s易入易出；Versionón 45.0.2454.101 m在windows 8.1 working Fine上我只是回到我的小提琴上，也无法复制它，直到我点击了红色框，然后在反复滚动之后，它发生了。也许小提琴需要聚焦才能出错？OP没有要求jQuery解决方案。他甚至可能不在他的项目中使用jQuery。这不是我想要的解决方案，但它确实让我想到——我在用jQuery触发转换时遇到了同样的问题：恐怕运气不好，我已经尝试了上面所有的事情——硬件加速、设置默认不透明度、使用不同的缓和、不同的时间（过渡时间越长，似乎发生的越少），尝试了“全部”过渡而不是“不透明”，添加了延迟（它等待延迟，然后立即跳转）尝试在.box内的div上使用：hover on.box进行转换。始终相同！在父元素上是否有其他转换？或者使用

*

选择器？没有，只是示例代码中所示。我刚刚上传了一个视频，显示了它的实际效果：如果创建一个只有该效果的空页面，会发生什么？没有其他方法是的，在我把它放在小提琴上之前，它是一个HTML页面，除了.box div和css之外什么都没有。即使只有这个，它仍然有这个问题——在我们办公室的三台计算机上。