PNG + CSS3 Transition + Blur导致意想不到的效果

时间:2014-08-13 14:26:25

标签: css3 css-transitions css-filters

让我解释一下情况。

我有一个包含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,...),问题就出现了。

Unexpected results

这个意想不到的结果只会在图像中出现,同时它有模糊滤镜。

我在使用

的某些MAC Safari中删除了此错误
-webkit-backface-visibility: hidden;
-webkit-transform: scale(1);

但不是在某些Windows机器上。 (我的开发机器没有错误,但是我的个人电脑和我的客户端电脑都有。)

对此有何帮助?

0 个答案:

没有答案