在Chrome和Safari浏览器中，Transform缩放属性无法正常工作。

Question

在Chrome和Safari浏览器中，Transform缩放属性无法正常工作。

18

.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>

- Justin Erickson

1

请创建一个Fiddle（jsfiddle.net）来可视化您的问题。 - Reflic

下面的回答有帮助吗？ - Jimmie Tyrrell

是的，它翻译成功了。非常感谢您。 - Justin Erickson

对于其他人来说，我使用的是 scale(45%)，在 Firefox 中可以工作，但在 Chrome 中不行。改用 scale(0.45) 就解决了问题。 - Jonathan Rys

2个回答

6

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

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

- akalanka

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jimmie Tyrrell · Accepted Answer

这是已知问题，详见此处提交的内容：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/

注意，我还在父容器的默认状态下添加了简单动画，以防悬停失效的问题再次发生。