input 标签在做动画时的bug

这次在做项目的过程中被程序猿叫去 改一个弹框

我看到界面如下:

这蛋疼了 为啥radio后面会有背景 我明明什么样式也没写 看我写的demo

正常的啊 难道是他们套错了 。自己检查了代码 发现并没有错误。。样式里面除了浏览器默认样式 没有别的样式被应用到

这里就纠结了  经过反复研究终于在stackoverflow看到了一个人的问题

地址:http://stackoverflow.com/questions/9838583/radio-button-background-goes-white-in-windows-chrome-when-using-webkit-backface?answertab=active#tab-top

啊 他这里提到-webkit-backface-visiblity 使用的遇到的bug 我们都知道-webkit-backface-visiblity 是用来解决闪白问题的。这个也有bug么

再自己看我的代码 果然有用到。因为刚说了 在弹窗里面 所以肯定有动画 -webkit-transform: translate3d用这个来定位弹窗的位置

当去掉这2个样式后发现问题果然被解决了。。。

解决方案一  不使用translate3d 来定位 使用top之类的 

解决方案二  在上面的网址里面有提到 就是使用图片来模拟他的选中状态。回答者发了一个详细的demo

希望能帮助到遇见这个问题正在纠结的人。

原文地址:https://www.cnblogs.com/xingmi/p/2650857.html