转换比例属性无法在Chrome&苹果浏览器 [英] Transform scale property not working in Chrome & Safari
问题描述
.tricky {width：200px;高度：200像素；边框半径：50％；边框：0像素实线；背景：＃2373bd；显示：内嵌块；位置：相对；溢出：隐藏；}。tricky_image {width：100％;高度：100％；-moz过渡：所有.6s缓解； -webkit-transition：所有.6s缓解； -ms-transition：所有.6s缓解； -o-transition：所有.6s缓解；过渡：所有.6s缓解； 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 =示例> < / 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;
高度：200像素；
边界半径：50％；
边界：0像素；
背景：＃2373bd；
display：inline-block;
头寸：相对；
溢出：隐藏；
}
.tricky_image {
width：100％;
身高：100％；
-moz-transition：所有.6s缓解；
-webkit-transition：所有.6s缓解；
-ms-transition：所有.6s缓解；
-o-transition：所有.6缓解；
过渡：所有.6缓解；
不透明度：0.7;
边界半径：50％；
filter：alpha（opacity = 70）;
溢出：隐藏；
}
.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 =示例>
< / div>
< / body>
< / html>
这是此处提到的已知问题： https://code.google.com/p/chromium/issues/detail?id = 157218
在Webkit中，借助硬件加速，动画层会在动画过程中提升到不同的渲染表面，然后在动画完成后降级。 / p>
结果是有一个简单的解决方案。通过向其添加轻量级动画，将容器元素提升为与硬件加速子级相同的渲染层：
。棘手的{
width：200px;
高度：200像素；
边界半径：50％；
边界：无；
背景：＃2373bd；
显示：块；
溢出：隐藏；
-webkit-transform：scale（1.0）;
}
.tricky_image {
width：200px;
高度：200像素；
-webkit-transition：所有.6s缓解；
不透明度：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/
请注意，我还添加了一个简单的动画设置为父容器的默认状态，因此悬停时不会发生相同的问题。
.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/:
<!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>
This is a known issue as filed here: 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.
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/
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.
这篇关于转换比例属性无法在Chrome&苹果浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
