css - filte transition过渡出现抖动
本文介绍了css - filte transition过渡出现抖动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
这是代码：
hover的时候会抖动，不知道为什么，浏览器 chrome比较新的某一版本，请赐教。
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
*{
margin:0;
padding:0;
}
.back{
height: 100vh;
width: 100%;
background:url("http://static.simpledesktops.com/uploads/desktops/2017/03/21/showgaze_pb_02.png") 0 0/100% auto fixed;
}
.content{
z-index:0;
color:#FFEFA7;
border-radius: 10px;
padding: 20px;
font-family:Lobster;
letter-spacing: 1px;
font-size: 35px;
position: relative;
height: 300px;
width:570px;
margin:10% auto;
overflow: hidden;
transition: all 0.3s linear;
filter: grayscale(1);
border:2px solid rgba(255,245,244,.3);
box-shadow:0 0 0 4px rgba(255,245,244,.1);
}
.content::before{
margin:-30px;
z-index:-1;
content: '';
display: block;
position: absolute;
background:url("http://static.simpledesktops.com/uploads/desktops/2017/03/21/showgaze_pb_02.png") 0 0/100% auto fixed;
filter:blur(5px);
left:0;top:0;right:0;bottom:0;
}
.content:hover{
filter:grayscale(0);
}
</style>
</head>
<body>
<div class='back'>
<div class='content'>
there must be some kind of way get out of here,say the joker to the thief.
</div>
</div>
</body>
</html>解决方案
附chrome版本：
最简单的方式其实就是将transition的过渡属性变为color，保证不会进行位移上的过渡。
不过这个为何会抖动还在研究中。【其实觉得这抖动蜜汁带感】
transition: color 0.3s linear;好吧，之前忘了，还有背景的过渡，但是
如果
transition: color,filter 0.3s linear;这样写，那么也会出现抖动效果。看来是filter的一个问题。
但是用一个img元素进行filter和transition关于grayscale的过渡测试不会导致这个问题发生。
先把原有的:before变为一个正常的div元素，但是仍然有问题。
现在将问题锁定到，存在滚动条时，会出现抖动问题。
这篇关于css - filte transition过渡出现抖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
