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/archive/2012/08/22/2650857.html

input 标签在做动画时的bug相关推荐

winphone系统a、input标签被点击时产生的半透明灰色背景
在winphone系统下,链接a和input标签被点击是会产生半透明灰色背景. 下面就分享一下如何消除此问题,代码如下: 1 <meta name="msapplication-tap ...
react-native做动画时的一些填坑总结
1. 强烈建议使用react-native-reanimated动画库在做动画时,发现使用react-native库中的animated,部分属性是不支持原生驱动的,比如width/height等 ...
uni-app中让input标签在点击时清空
<input type="text" :value="inputValue" @focus="vauleEmpty"/> 1,动 ...
input标签type为number时如何去除加减按钮效果
我们在使用input type = number 时只想输入数字时会出现如下图所示的效果显然这不是我们想要的只需要我们简单把css样式改变下即可 /* 谷歌 */input::-webkit- ...
Blender图解教程：使用参考视频做动画时如何指定参考视频的起始帧
之前写过一篇博客<Blender图解教程:怎样把视频(MP4等格式)设置为动画参考序列图>.昨天有同学问,如果一个动画需要多个参考视频怎么办,参考视频需要在不同的帧开始播放,那么如何制定每 ...
input标签设置纯数字输入
input标签设置纯手机号输入(键盘输入或粘贴时自动去除非数字字符) 解决方案: <input type="tel" placeholder="请输入11位手机 ...
js/javaScript通过setTimeout做动画和需要注意的点
一.用setTimeout做动画时每帧动画时间间隔设置为多少合适? 因为目前大多数电脑显示器的刷新频率是60HZ,大多数浏览器都会对页面重绘操作加以限制,使其不超过显示器的重绘频率:因为即使超过那个频 ...
label标签与input标签的对齐问题
如果要实现上面这种对齐效果,直接拉到文章底,反正我会说一堆废话.jpg 在这里使用的是嵌套格式: <label>Text<input/></label> 而非通常的 ...
html input file 修改按钮文字_html单选按钮默认选中怎么做？input标签的单选按钮用法实例...
本篇文章主要的向大家介绍了关于html input标签的单选按钮的使用方法,还有关于HTML input标签的单选默认按钮的做法.接下来我们一起来看看这篇文章吧首先我们介绍的是在html input ...

input 标签在做动画时的bug

input 标签在做动画时的bug相关推荐

最新文章

热门文章