Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/39.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html css3变换填充在动画期间将元素收缩1 px_Html_Css - Fatal编程技术网
Fatal编程技术网
  • html/
  • Html css3变换填充在动画期间将元素收缩1 px

Html css3变换填充在动画期间将元素收缩1 px

html css

Html css3变换填充在动画期间将元素收缩1 px,html,css,Html,Css,我有一个大填充的输入字段。当它被聚焦或包含值时，填充被更改，并且此更改通过css3transition:all 0.5s设置动画问题在于，在chrome中，过渡持续时间的元素高度从42px变为41.998px，chrome将其渲染为41px，导致内容在动画期间跳跃1px 输入{ 填充：10px； 过渡：均为0.5s； } 输入：焦点{ 填充：20px 10px 0； 大纲：无； } 这里发生的事情是，您实际上正在为两个属性设置动画顶部填充正在从10px过渡到20px，底部填充正在从10px过渡

我有一个大填充的输入字段。当它被聚焦或包含值时，填充被更改，并且此更改通过css3
transition:all 0.5s设置动画问题在于，在chrome中，过渡持续时间的元素高度从42px变为41.998px，chrome将其渲染为41px，导致内容在动画期间跳跃1px



输入{
填充：10px；
过渡：均为0.5s；
}
输入：焦点{
填充：20px 10px 0；
大纲：无；
}


这里发生的事情是，您实际上正在为两个属性设置动画<代码>顶部填充
正在从10px过渡到20px，
底部填充
正在从10px过渡到0px。根据各种因素，浏览器可能难以同时设置两个属性的动画-尤其是当
过渡属性设置为
all
时-导致元素高度出现一些“闪烁”，因为当前，其高度是通过将
行高加在一起来计算的，
填充
和
边框

解决这个问题的一种方法是给元素指定一个特定的
高度
，这样就不必在转换的每个阶段计算该值



输入{
边框：1px实心#999；
框大小：边框框；
高度：42px；
线高：20px；
大纲：0；
填充：10px；
过渡：填充。5s；
}
输入：焦点{
填充：20px 10px 0；
}


在旧版本的Chrome（v43）上没有问题。