Skip to content

Instantly share code, notes, and snippets.

@ufologist

ufologist/blur-filter-bug.html

Created March 13, 2017 09:43
Show Gist options
  • Save ufologist/f98b3fa5d1240732ef3333259e8279cf to your computer and use it in GitHub Desktop.
Save ufologist/f98b3fa5d1240732ef3333259e8279cf to your computer and use it in GitHub Desktop.
Download ZIP
blur filter 动画完成后造成内容被裁剪(显示不全)
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment