转换缩放属性在 Chrome 和 Safari 中不起作用

.tricky {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 0px solid;
  background: #2373bd;
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.tricky_image {
  width: 100%;
  height: 100%;
  -moz-transition: all .6s ease;
  -webkit-transition: all .6s ease;
  -ms-transition: all .6s ease;
  -o-transition: all .6s ease;
  transition: all .6s ease;
  opacity: 0.7;
  border-radius: 50%;
  filter: alpha(opacity=70);
  overflow: hidden;
}
.tricky_image:hover {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

<!doctype html>
<html>
<head>
</head>
<body>
  <div class="tricky">
    <img class="tricky_image" src="location_images/sanfranciscoweb.png" alt="Example">
  </div>

</body>
</html>

我

想要的效果仅在 Firefox 中工作，我假设 IE。我从一个透明图像开始，周围有一个蓝色背景的div 包装器。当用户将鼠标悬停在图像上时，我希望它放大并将不透明度恢复到 100%，而不会破坏div 包装器的设置宽度和高度。这在 Firefox 中完美运行，但是当我在 Chrome 中运行动画时，图像超过了它后面的蓝色div 包装器的宽度。这是我的代码，任何帮助将不胜感激&JS Fiddle http://jsfiddle.net/yaLupdzo/1/：

<!doctype html>
<html>
<head>
  <style>
    .tricky {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      border: 0px solid;
      background: #2373bd;
      display: inline-block;
      position: relative;
      overflow: hidden;
    }
    
    .tricky_image {
      width: 100%;
      height: 100%;
      -moz-transition: all .6s ease;
      -webkit-transition: all .6s ease;
      -ms-transition: all .6s ease;
      -o-transition: all .6s ease;
      transition: all .6s ease;
      opacity: 0.7;
      border-radius: 50%;
      filter: alpha(opacity=70);
      overflow: hidden;
    }
    
    .tricky_image:hover {
      opacity: 1;
      filter: alpha(opacity=100);
      -webkit-transform: scale(1.2);
      transform: scale(1.2);
    }
  </style>
</head>
<body>

  <div class="tricky">
    <img class="tricky_image" src="location_images/sanfranciscoweb.png" alt="Example">
  </div>

</body>
</html>

这是一个

已知问题，如下所述：https://code.google.com/p/chromium/issues/detail?id=157218

在 Webkit 中，通过硬件加速，动画层在动画期间提升到不同的渲染图面，然后在动画完成后降级。

事实证明有一个简单的解决方案。通过向其添加轻量级动画，将容器元素"提升"到与硬件加速子元素相同的呈现层：

.tricky {
    width: 200px; 
    height: 200px;
    border-radius: 50%;
    border: none;
    background: #2373bd;
    display: block;
    overflow: hidden;
    -webkit-transform:scale(1.0);
}
.tricky_image {
    width: 200px; 
    height: 200px;
    -webkit-transition: all .6s ease;
    opacity: 0.7;
}
.tricky:hover {
    -webkit-transform:scale(1.0);
}
.tricky:hover .tricky_image {
    opacity: 1;
    -webkit-transform:scale(1.2);
 }

请参阅：http://jsfiddle.net/yaLupdzo/3/

请注意，我还向父容器的默认状态添加了一个简单的动画，以便在悬停时不会发生相同的问题。

  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);

您可以像这样重复代码以实现浏览器兼容性。

相关内容

最新更新

热门标签：