ufologist/blur-filter-bug.html

## blur-filter-bug.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>blur filter 动画完成后造成内容被裁剪(显示不全)</title>
    <style>
    @-webkit-keyframes anim1 {
        0% {
            opacity: 0;
            -webkit-transform-origin: 50% 50%;
            -webkit-transform: scale(2,2);
            -webkit-filter: blur(2px)
        }
        100% {
            opacity: 1;
            -webkit-transform-origin: 50% 50%;
            -webkit-transform: scale(1,1);
            -webkit-filter: blur(0); /*none;*/
        }
    }
    @keyframes anim1 {
        0% {
            opacity: 0;
            transform-origin: 50% 50%;
            transform: scale(2,2);
            filter: blur(2px)
        }
        100% {
            opacity: 1;
            transform-origin: 50% 50%;
            transform: scale(1,1);
            filter: blur(0); /*none;*/
        }
    }
    </style>
</head>
<body>
    <h1 style="font-size: 1.2em;">blur filter 动画完成后造成内容被裁剪(显示不全)</h1>
    <h2 style="font-size: 1em;">触发条件</h2>
    <ul>
        <li>父级 <code>blur filter</code> 动画</li>
        <li>父级 <code>overflow hidden</code></li>
    </ul>
    <div style="animation: anim1 2s ease 0s both; overflow: hidden;">
        <img src="http://www.placehold.it/200x400">
    </div>
    <h2 style="font-size: 1em;">解决办法</h2>
    <p>在定义动画结束帧时, 不要再使用 <code>filter: blur</code>, 而是使用 <code>filter: none</code></p>
    <p>目前发现有这个问题的平台是 iOS 10, 其他平台如果有类似问题, 应该也可以这样解决</p>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>blur filter 动画完成后造成内容被裁剪(显示不全)</title>
	<style>
	@-webkit-keyframes anim1 {
	0% {
	opacity: 0;
	-webkit-transform-origin: 50% 50%;
	-webkit-transform: scale(2,2);
	-webkit-filter: blur(2px)
	}
	100% {
	opacity: 1;
	-webkit-transform-origin: 50% 50%;
	-webkit-transform: scale(1,1);
	-webkit-filter: blur(0); /none;/
	}
	}
	@keyframes anim1 {
	0% {
	opacity: 0;
	transform-origin: 50% 50%;
	transform: scale(2,2);
	filter: blur(2px)
	}
	100% {
	opacity: 1;
	transform-origin: 50% 50%;
	transform: scale(1,1);
	filter: blur(0); /none;/
	}
	}
	</style>
	</head>
	<body>
	<h1 style="font-size: 1.2em;">blur filter 动画完成后造成内容被裁剪(显示不全)</h1>
	<h2 style="font-size: 1em;">触发条件</h2>
	<ul>
	<li>父级 <code>blur filter</code> 动画</li>
	<li>父级 <code>overflow hidden</code></li>
	</ul>
	<div style="animation: anim1 2s ease 0s both; overflow: hidden;">
	<img src="http://www.placehold.it/200x400">
	</div>
	<h2 style="font-size: 1em;">解决办法</h2>
	<p>在定义动画结束帧时, 不要再使用 <code>filter: blur</code>, 而是使用 <code>filter: none</code></p>
	<p>目前发现有这个问题的平台是 iOS 10, 其他平台如果有类似问题, 应该也可以这样解决</p>
	</body>
	</html>