让我解释一下情况。
我有一个包含5张图片的div。每个图像在5'槽'的div中绝对定位。
我的javascript通过更改类'slot-0'...'slot-4'滚动此图像,每个类包含元素的顶部/左侧定位。
每个图像都设置为具有CSS过渡1和模糊滤镜,但中心图像不会模糊。
只要运动出现,在某些浏览器中会出现意想不到的效果:在透明的PNG边框中会出现类似“内部阴影”的效果。
HTML:
<div id="showcase-container" class="">
<img src="0.png" class="slot-0">
<img src="1.png" class="slot-1">
<img src="2.png" class="slot-2">
<img src="3.png" class="slot-3">
<img src="4.png" class="slot-4">
</div>
LESS:
// Mixins
.blur (@radius: 3px) {
filter: blur(@radius);
-webkit-filter: blur(@radius);
-moz-filter: blur(@radius);
-o-filter: blur(@radius);
-ms-filter: blur(@radius);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='@radius');
}
#showcase-container {
position: relative;
overflow-x: hidden;
width: 500px;
height: 500px;
.item {
position: absolute;
height: auto;
cursor: pointer;
&.slot-0 {
width: 30%;
top: 29%;
left: -40%;
.blur()
}
&.slot-1 {
width: 25%;
top: 27%;
left: -10%;
.blur();
}
&.slot-2 {
width: 20%;
top: 21%;
left: 40%;
}
&.slot-3 {
width: 13%;
top: 23%;
left: 80%;
.blur(3px);
}
&.slot-4 {
width: 7%;
top: 18%;
left: 120%;
.blur();
}
&.animate {
-webkit-backface-visibility: hidden;
-webkit-transform: scale(1);
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
}
}
当我通过改变下一个插槽类来移动图像元素时 (slot-0到slot-1,slot1到slot2,...),问题就出现了。
这个意想不到的结果只会在图像中出现,同时它有模糊滤镜。
我在使用
的某些MAC Safari中删除了此错误-webkit-backface-visibility: hidden;
-webkit-transform: scale(1);
但不是在某些Windows机器上。 (我的开发机器没有错误,但是我的个人电脑和我的客户端电脑都有。)
对此有何帮助?