有没有办法禁用它?
我只是在浏览器中...当您单击链接或按钮或具有单击功能的div时,它会闪烁一个灰色框,您可以快速单击该框.我该如何防止这种情况?
这是iphone网站:http: //www.thevisionairegroup.com/projects/accessorizer/site/
点击"立即播放"后,您将进入游戏.枪支将滚动进入.您可以上下滚动钱包和配件.你可以看到,当你放手时它们就会突然到位.就像快照发生一样,会发生闪烁.我正在使用的唯一webkit动画是:
'-webkit-transition': 'none'
'-webkit-transition': 'all 0.2s ease-out'
'-webkit-transform': 'translate(XXpx, XXpx)'
Run Code Online (Sandbox Code Playgroud)
我根据是否要让它进行动画选择第一个或第二个过渡,并且变换是我移动物体的唯一方式.
但最大的问题是当您点击"匹配项目",然后点击"再次播放".你会看到枪支的动画效果,配件/钱包的整个背景都会变白.有人可以请你透露一些洞察力,为什么会发生这种情况?
你读得对.在办公室中的多台机器上进行测试,方案之间的唯一区别是浏览器大小.一位同事将它缩小到2000px的甜蜜点.当我们每个人将浏览器的大小调整为> = 2000px宽并将鼠标悬停在具有变换动画的元素上时,页面上的各种元素 - 特别是具有CSS渐变背景的任何元素 - 将会闪烁.相反,如果您将浏览器的大小调整为<2000px宽并将鼠标悬停在同一元素上,则不会发生闪烁.
其他人看到过这种奇怪的行为吗?为什么2000px是一个神奇的数字,2000px究竟发生了什么?
注意 - 由于此网站尚未公开,我无法真正共享屏幕截图/视频/链接,并且代码相对不必要,因为这似乎更像是一个浏览器问题.
注2 - 我的问题实际上是围绕在2000px的Safari中发生了什么,不一定是如何修复闪烁backface-visibility或translateZ等等.原因是我们-webkit-font-smoothing: subpixel-antialiased;在整个网站中大量使用并使用任何这些技巧胜过整个页面的属性,为所有文本打开抗锯齿/灰度.
编辑 -好的,抱歉没有早点这样做.这里有一些jsFiddle中的代码应该重现这个问题:http://jsfiddle.net/brandondurham/ujPMK/embedded/result/
请记住,Safari必须设置为至少2000px宽才能实现.
我有一个非常简单的演示工作,它使用Webkit转换和转换来实现'面板'(div)之间的平滑水平滚动.
我想要走这条路线而不是Javascript驱动系统的原因是它适用于iPad和Javascript性能相当差,但css转换和过渡是如丝绸一样平滑.可悲的是,我用我的演示在iPad上闪烁了很多.
你需要safari或iPad才能看到它的实际效果.我从来没有在转换和转换的任何演示中看到过这种情况,所以我希望这是可以修复的.
无论如何这里的代码是为了这个东西....
HTML看起来像这样.
<html>
<head>
<title>Swipe Demo</title>
<link href="test.css" rel="stylesheet" />
<link href="styles.css" rel="stylesheet" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="functions.js"></script>
<script type="text/javascript" src="swiping.js"></script>
</head>
<body>
<div id="wrapper">
<div class='panel one'>
<h1>This is panel 1</h1>
</div>
<div class='panel two'>
<h1>This is panel 2</h1>
</div>
<div class='panel three'>
<h1>This is panel 3</h1>
</div>
<div class='panel four'>
<h1>This is panel 4</h1>
</div>
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
CSS看起来像这样
body,
html
{
padding: 0;
margin: 0;
background: #000;
} …Run Code Online (Sandbox Code Playgroud) 我对css3动画有一些奇怪的问题.
我有块元素与css3 transformation应用.当使用-webkit-transform矩阵应用转换时 - 元素看起来非常平滑.但是当我尝试使用-webkit-keyframes应用动画时,字体和其他一些div在动画期间看起来很糟糕.
样本可以在这里找到:http://shuma.ru/animation.html
问题可以在'webkit浏览器Safari/Chrome'等中看到.
我正在通过phonegap构建应用程序,当我从屏幕底部向上滑动菜单时,我想在后台禁用div的滚动;
通过将溢出从滚动更改为隐藏为什么该菜单滑动处于活动状态,但它会导致屏幕闪烁.
当溢出属性发生变化时,任何人都知道任何黑客可以阻止div闪烁吗?
使用内联SVG时,我遇到了一个奇怪的问题.我创建在一个路径<svg>元素,并使用top或bottomCSS属性与relative定位叠加这个SVG在以前的元素得到部分冷静的"缺口"的效果.
这完全适用于Chrome,但在IE10和FF25中,我在SVG的右侧和顶部获得了这个"透明"边框.我把'透明'放在引号中,因为据我所知,它是透明的,因为它显示在它下面的明亮的绿色背景.这是一个截图,指向我看到的确切位置(截图来自FF25):

我最初得到了Codrops的分隔符建议.
在此测试页面中,标题为" SVG Trouble Section "的部分是有问题的部分.
有没有办法解决这个问题,所以我的技术可以很好地跨浏览器?或者有更好的方法来达到我想要的效果吗?谢谢!
更新1: 通过更多测试,我发现有时在Firefox中滚动时,顶部幻像"边框"消失并且不会返回.甚至在重新加载页面之后.我不确定是什么导致它消失,它不是问题的一部分,只是一个异常现象.
更新2: 我已经做了一些额外的测试,删除元素以查看可能触发的内容以及删除注释后,"SVG故障部分"上方的几个部分和页脚,边框现在已移至底部分隔符.这是没有页脚的页面:http://ignitepixels.com/sandbox/svg/sample.html
更新3: 我创造了一个小提琴,我在其中复制了这个问题.这应该使更容易的故障排除:http://jsfiddle.net/fmpeyton/NuneR/
由于你无法在jsfiddle中保存特定的面板大小,我附上了一个大概的大小截图,我可以用Firefox 25重现这个问题:
可能与Update 1相关,问题也会根据窗口宽度显示/消失.
我有一个关于Chrome和Safari中不透明度转换的错误.当我将鼠标悬停在父div上,触发子div上从0到1的不透明度转换时,子div下面的内容会抖动一段时间.
我已经尝试使用-webkit-font-smoothing: antialiased;上body,但效果仍然存在.有什么想法吗?您可以在此处查看问题(使用Chrome或Safari,将鼠标悬停在顶部菜单中的"帐户"链接上,您会看到闪烁).