在 firefox 中，我遇到了延迟，这使得滚动窗口(在 mac 上使用触控板)几乎不可能顺利完成。
不确定我做错了什么，如果有的话，或者这只是在悬停时进行过渡的意外副作用。
.list > li > div {
border: 1px solid #09c;
border-radius: 5px;
margin-bottom: 20px;
padding: 10px 20px;
border-bottom: 7px solid #39c;
position: relative;
background: #ffffff;
/* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #fcfcfc 66%, #fbfbfb 80%, #fafafa 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(66%, #fcfcfc), color-stop(80%, #fbfbfb), color-stop(100%, #fafafa));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%, #fcfcfc 66%, #fbfbfb 80%, #fafafa 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%, #fcfcfc 66%, #fbfbfb 80%, #fafafa 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%, #fcfcfc 66%, #fbfbfb 80%, #fafafa 100%);
/* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%, #fcfcfc 66%, #fbfbfb 80%, #fafafa 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#fafafa', GradientType=0);
/* IE6-9 */
/*box-shadow: 1px 5px 15px #f0f0f0; */
box-shadow: 1px 1px 2px #fff inset, 1px 5px 15px #f0f0f0;
-webkit-transition: all 0.15s ease-in-out;
-moz-transition: all 0.15s ease-in-out;
-o-transition: all 0.15s ease-in-out;
-ms-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
margin: 0 10px 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.list > li:hover > div {
box-shadow: 1px 1px 2px #fff inset, 0px 5px 20px #ddd;
background: #fff;
-webkit-transition: all 0.15s ease-in-out;
-moz-transition: all 0.15s ease-in-out;
-o-transition: all 0.15s ease-in-out;
-ms-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
margin-top: -1px;
margin-bottom: 21px;
}
最佳答案
我无法对您的问题进行全面测试，但是...
过渡样式不需要复制到 :hover 部分。只有原始部分就足够了。它可能是罪魁祸首。
由于渲染速度可能是问题的主要来源，您还可以尝试添加一个 transition-delay，这样滚动就不会激活下方的所有可悬停元素。
关于css transitions 阻止窗口滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13696574/