CSS 转换比例属性在 Chrome 和 Safari 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25372315/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Transform scale property not working in Chrome & Safari
提问by Justin Erickson
.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>my desired effect is only working in Firefox and i assume IE. I am starting with a transparent image with a div wrapper around it with a blue background. When the user hovers over the image, i want it to zoom in and restore the opacity to 100% without breaking the set width and height of the div wrapper. This works perfectly in Firefox, but when i run the animation in Chrome the image exceeds the width of the blue div wrapper behind it. Here is my code and any help would be appreciated & JS Fiddle http://jsfiddle.net/yaLupdzo/1/:
我想要的效果只适用于 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>
回答by Jimmie Tyrrell
This is a known issue as filed here: https://code.google.com/p/chromium/issues/detail?id=157218
这是此处提交的已知问题：https: //code.google.com/p/chromium/issues/detail?id=157218
In Webkit, with hardware acceleration, animated layers get promoted to a different rendering surface during animation, and then demoted once the animation is complete.
在 Webkit 中，通过硬件加速，动画层在动画过程中被提升到不同的渲染表面，然后在动画完成后降级。
Turns out there is a simple solution. Have the container element 'promoted' to the same rendering layer as the hardware accelerated child by adding a lightweight animation to it:
原来有一个简单的解决方案。通过向其添加轻量级动画，将容器元素“提升”到与硬件加速子元素相同的渲染层：
.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);
}
See: http://jsfiddle.net/yaLupdzo/3/
见：http: //jsfiddle.net/yaLupdzo/3/
Note that I've also added a simple animation to the parent container's default state, so that the same issue doesn't happen when hovering out.
请注意，我还在父容器的默认状态中添加了一个简单的动画，以便在悬停时不会发生相同的问题。
回答by akalanka
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
You can repeat your code like that for browser compatibility..
为了浏览器兼容性，您可以重复您的代码。
