相关疑难解决方法(0)

iPad Safari:如何在链接被点击时禁用快速闪烁效果

有没有办法禁用它?
我只是在浏览器中...当您单击链接或按钮或具有单击功能的div时,它会闪烁一个灰色框,您可以快速单击该框.我该如何防止这种情况?

mobile-safari ipad

85
推荐指数
2
解决办法
5万
查看次数

iPhone WebKit CSS动画导致闪烁

这是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)

我根据是否要让它进行动画选择第一个或第二个过渡,并且变换是我移动物体的唯一方式.

但最大的问题是当您点击"匹配项目",然后点击"再次播放".你会看到枪支的动画效果,配件/钱包的整个背景都会变白.有人可以请你透露一些洞察力,为什么会发生这种情况?

css iphone animation webkit flicker

81
推荐指数
6
解决办法
8万
查看次数

CSS Transform会导致Safari中出现闪烁,但仅当浏览器宽度> = 2000px时才会出现闪烁

你读得对.在办公室中的多台机器上进行测试,方案之间的唯一区别是浏览器大小.一位同事将它缩小到2000px的甜蜜点.当我们每个人将浏览器的大小调整为> = 2000px宽并将鼠标悬停在具有变换动画的元素上时,页面上的各种元素 - 特别是具有CSS渐变背景的任何元素 - 将会闪烁.相反,如果您将浏览器的大小调整为<​​2000px宽并将鼠标悬停在同一元素上,则不会发生闪烁.

其他人看到过这种奇怪的行为吗?为什么2000px是一个神奇的数字,2000px究竟发生了什么?

注意 - 由于此网站尚未公开,我无法真正共享屏幕截图/视频/链接,并且代码相对不必要,因为这似乎更像是一个浏览器问题.

注2 - 我的问题实际上是围绕在2000px的Safari中发生了什么,不一定是如何修复闪烁backface-visibilitytranslateZ等等.原因是我们-webkit-font-smoothing: subpixel-antialiased;在整个网站中大量使用并使用任何这些技巧胜过整个页面的属性,为所有文本打开抗锯齿/灰度.

编辑 -好的,抱歉没有早点这样做.这里有一些jsFiddle中的代码应该重现这个问题:http://jsfiddle.net/brandondurham/ujPMK/embedded/result/

请记住,Safari必须设置为至少2000px宽才能实现.

css safari transform css3 css-transitions

35
推荐指数
3
解决办法
5万
查看次数

如何在使用Webkit转换和转换时修复闪烁

我有一个非常简单的演示工作,它使用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)

html css safari webkit

19
推荐指数
3
解决办法
4万
查看次数

css3动画文物

我对css3动画有一些奇怪的问题.

我有块元素与css3 transformation应用.当使用-webkit-transform矩阵应用转换时 - 元素看起来非常平滑.但是当我尝试使用-webkit-keyframes应用动画时,字体和其他一些div在动画期间看起来很糟糕.

样本可以在这里找到:http://shuma.ru/animation.html

问题可以在'webkit浏览器Safari/Chrome'等中看到.

html5 webkit css3

8
推荐指数
1
解决办法
3654
查看次数

当css溢出时IOS闪烁错误:滚动更改为溢出:隐藏

我正在通过phonegap构建应用程序,当我从屏幕底部向上滑动菜单时,我想在后台禁用div的滚动;

通过将溢出从滚动更改为隐藏为什么该菜单滑动处于活动状态,但它会导致屏幕闪烁.

当溢出属性发生变化时,任何人都知道任何黑客可以阻止div闪烁吗?

css html5 ios

8
推荐指数
2
解决办法
1万
查看次数

在FF25和IE10中内联SVG上的1px(或更小?亚像素?)边界,而不是Chrome

使用内联SVG时,我遇到了一个奇怪的问题.我创建在一个路径<svg>元素,并使用topbottomCSS属性与relative定位叠加这个SVG在以前的元素得到部分冷静的"缺口"的效果.

这完全适用于Chrome,但在IE10FF25中,我在SVG的右侧和顶部获得了这个"透明"边框.我把'透明'放在引号中,因为据我所知,它是透明的,因为它显示在它下面的明亮的绿色背景.这是一个截图,指向我看到的确切位置(截图来自FF25):

Firefox 25中的SVG边界问题

我最初得到了Codrops的分隔符建议.

测试页面

在此测试页面中,标题为" SVG Trouble Section "的部分是有问题的部分.

有没有办法解决这个问题,所以我的技术可以很好地跨浏览器?或者有更好的方法来达到我想要的效果吗?谢谢!


更新1: 通过更多测试,我发现有时在Firefox中滚动时,顶部幻像"边框"消失并且不会返回.甚至在重新加载页面之后.我不确定是什么导致它消失,它不是问题的一部分,只是一个异常现象.

更新2: 我已经做了一些额外的测试,删除元素以查看可能触发的内容以及删除注释后,"SVG故障部分"上方的几个部分和页脚,边框现在已移至底部分隔符.这是没有页脚的页面:http://ignitepixels.com/sandbox/svg/sample.html

更新3: 我创造了一个小提琴,我在其中复制了这个问题.这应该使更容易的故障排除:http://jsfiddle.net/fmpeyton/NuneR/

由于你无法在jsfiddle中保存特定的面板大小,我附上了一个大概的大小截图,我可以用Firefox 25重现这个问题: Firefox 25中的小提琴 可能与Update 1相关,问题也会根据窗口宽度显示/消失.

css svg

8
推荐指数
1
解决办法
4243
查看次数

Chrome + Safari不透明度转换错误会创建st

我有一个关于Chrome和Safari中不透明度转换的错误.当我将鼠标悬停在父div上,触发子div上从0到1的不透明度转换时,子div下面的内容会抖动一段时间.

我已经尝试使用-webkit-font-smoothing: antialiased;body,但效果仍然存在.有什么想法吗?您可以在此处查看问题(使用Chrome或Safari,将鼠标悬停在顶部菜单中的"帐户"链接上,您会看到闪烁).

html css safari webkit google-chrome

3
推荐指数
1
解决办法
5824
查看次数