Question

我在this film上显示了我的问题，浏览器是Chrome（v.44.0.2403.107 m）。鼠标悬停并离开后，背景图像应向上和向下缩放。但有时Chrome会跳过这种粗略动作的动画。我也在IE，Mozilla，Opera上测试过，没有这样的问题，一切都很好。

我正在处理悬停时的类别元素缩放，但我只希望图像缩放而不是描述。以前我可以使用background-size列表元素上的transition .categoryItem来实现它，但遗憾的是IE不支持bacground-size中transition的百分比。所以我提出了以下解决方法，这种方法较少，但仍然存在问题。

为什么我要在HTML中为元素添加样式 - 它是jquery脚本的一部分。这个概念是允许用户通过img标记在CMS中添加自己的图像，li元素是src元素的一部分，但它是隐藏的，它是{{1} }被复制到div的背景图片网址。

我试过了：

将z-index es添加到categoryItem和categoryItemImage
添加webkit-backface-visibility:hidden
添加ease-in-out
延迟transition
在Google上搜索类似的问题几个小时

我还能做些什么？

＆＃13;

body {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.categoryItem {
  position: relative;
  background: black;
  transition: all 2.5s;
  -webkit-transition: all 2.5s;
  -moz-transition: all 2.5s;
  -ms-transition: all 2.5s;
}
.categoryItemImage {
  position: relative;
  transition: all 1.5s;
  -webkit-transition: all 1.5s;
  -moz-transition: all 1.5s;
  -ms-transition: all 1.5s;
}
.categoryItem:hover .categoryItemImage {
  transform: scale(1.035, 1.035);
  -webkit-transform: scale(1.035, 1.035);
  -moz-transform: scale(1.035, 1.035);
  -ms-transform: scale(1.035, 1.035);
  transition: all 2.5s;
  -webkit-transition: all 2.5s;
  -moz-transition: all 2.5s;
  -ms-transition: all 2.5s;
}
.categoryItemDescription {
  max-width: 500px;
  position: absolute;
  left: 50px;
  bottom: 100px;
  background-color: #ffffff;
}

＆＃13;

<ul class="categoriesOverview">
  <li class="categoryItem" style="height: 433.3px; overflow:hidden;">
    <div class="categoryItemImage" style="height:inherit; background-image: url(http://lorempixel.com/1920/572) !important; background-position: 50% 50%;"></div>
    <div class="categoryItemDescription">
      <h2>The title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex sed neque dignissim imperdiet eget a odio. Etiam semper mollis scelerisque. Integer rutrum, dolor ac efficitur viverra, nulla augue vulputate turpis, a vulputate sapien leo
        a dui. Sed id lectus tellus. Curabitur at congue ante.</p>
      <a class="button" href="#">Click me</a>
    </div>
  </li>
</ul>

＆＃13;

Answer 1

它当然看起来像一个错误，但手动设置值似乎解决了它，或者至少使它不常发生。像这样：

＆＃13;

var imgElem = document.querySelector('.categoryItemImage');
var elem = document.querySelector('.categoryItem');


imgElem.onmouseover = function(e){
    console.log(window.getComputedStyle(imgElem).getPropertyValue('transform'))
    imgElem.style['transform'] = 'matrix(1.035,0,0,1.035,0,0)'
    imgElem.style['-webkit-transform'] = 'matrix(1.035,0,0,1.035,0,0)'
}
imgElem.onmouseout = function(e){
    console.log(window.getComputedStyle(imgElem).getPropertyValue('transform'))
    imgElem.style['transform'] = 'matrix(1,0,0,1,0,0)'
    imgElem.style['-webkit-transform'] = 'matrix(1,0,0,1,0,0)'
}

＆＃13;

body {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.categoryItem {
  position: relative;
  background: black;
  transition: all 2.5s;
  -webkit-transition: all 2.5s;
  -moz-transition: all 2.5s;
  -ms-transition: all 2.5s;
}
.categoryItemImage {
  position: relative;
  transition: all 1.5s;
  -webkit-transition: all 1.5s;
  -moz-transition: all 1.5s;
  -ms-transition: all 1.5s;
}
.categoryItem:hover .categoryItemImage {
 
  -moz-transform: scale(1.035, 1.035);
  -ms-transform: scale(1.035, 1.035);
  transition: all 2.5s;
  -webkit-transition: all 2.5s;
  -moz-transition: all 2.5s;
  -ms-transition: all 2.5s;
}
.categoryItemDescription {
  max-width: 500px;
  position: absolute;
  left: 50px;
  bottom: 100px;
  background-color: #ffffff;
}

＆＃13;

<ul class="categoriesOverview">
  <li class="categoryItem" style="height: 433.3px; overflow:hidden;">
    <div class="categoryItemImage" style="height:inherit; background-image: url(http://lorempixel.com/1920/572) !important; background-position: 50% 50%;"></div>
    <div class="categoryItemDescription">
      <h2>The title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex sed neque dignissim imperdiet eget a odio. Etiam semper mollis scelerisque. Integer rutrum, dolor ac efficitur viverra, nulla augue vulputate turpis, a vulputate sapien leo
        a dui. Sed id lectus tellus. Curabitur at congue ante.</p>
      <a class="button" href="#">Click me</a>
    </div>
  </li>
</ul>

＆＃13;

Chrome上的悬停转换比例问题

1 个答案: