0

在 Firefox 中,我得到了延迟,这使得滚动窗口(在 mac 上使用触控板)几乎不可能顺利完成。

http://wishd.me/

不知道我做错了什么,如果有的话,或者这只是在悬停时进行转换的意外副作用。

.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;
}
4

1 回答 1

1

我无法对您的问题进行全面测试,但是...

过渡样式不需要复制到该:hover部分。只有原始部分就足够了。它可能是罪魁祸首。


由于渲染速度可能是问题的主要来源,您也可以尝试添加一个transition-delay,以便滚动不会激活下面的所有可悬停元素。

于 2012-12-04T05:46:27.427 回答