css解决文字抖动问题

当点击选中时,文字会发生跳动问题坍台,原因是使用了CSS3动画导致高度坍塌计算不准,解决如下:

在使用CSS3变化属性,可能涉及该元素3d的变化,而3d又有正反面之分,导致计算高度时,高度在不断变化,才会产生抖动效果。

下面属性含义:当元素背面朝向观察者时是否可见。将其设置为隐藏,可将不断变化的高度不显示出来。

backface-visibility: hidden;
// 兼容写法
-webkit-backface-visibility: hidden;

在这里插入图片描述
父属性:使用了transform变形
在这里插入图片描述

子元素文本属性:也使用了transform变形
在这里插入图片描述
在这里插入图片描述

编辑 | sishen
来源 | 前端兔
公众号 | 前端兔

关注公众号查看更多前端知识分享~~

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值