jjzjj

javascript - OSX 上的 Safari 6 中的 CSS3 闪烁(但这不是闪烁到白色的问题!)

coder 2024-07-15 原文

此问题不会出现在 iOS 或 Chrome 上，因此它不是与 Webkit 相关的问题。它似乎特定于 OS X 10.8.2 上的最新 Safari 6.0.2(并且未被 Safari 6.0.3 附带的 10.8.3 预览版本 12D65 修复)。我将很快在带有 Safari 6.0.2 的 Lion 10.7.5 上进行测试，还将在预览版 12D68 上进行测试。

http://jsfiddle.net/zrr2b/

这是一个使问题非常明显的 fiddle 。如果您有一台运行 ML 的 Mac，您应该会看到 Chrome 和 Safari 之间的显着差异，当您移动鼠标时，Safari 会闪烁很多。

基本上，问题是 Safari 会间歇性地绘制从 JS 为单个帧设置的目标变换，然后继续过渡动画。这会导致闪烁，但前提是过渡是在开始的某个地方的中间。因此，对于大多数(非密集使用)CSS3 转换，该错误不会露出丑陋的头，但如果功能或视觉效果依赖于它来平滑地插值到目标(如我当前的元素所做的那样)，则这种闪烁并不令人愉快。

我研究了与闪烁相关的类似主题，并应用了几乎所有样式组合来抵消闪烁，例如 -webkit-backface-visibility: hidden，强制各种父元素获得硬件加速、-webkit-transform-style: preserve-3d、-webkit-perspective: 1000，不幸的是，它们都没有做任何事情来解决这个 Safari 特有的闪烁问题，也就是说，不是闪烁到白色或空白，而是闪烁到单个帧的目标变换。

在此分支中，您可以看到我设置了一堆有助于“常规闪烁”但对我没有影响的样式。 http://jsfiddle.net/zrr2b/1/

因为这不是 webkit 特定的问题，所以我不确定去哪里发布错误报告。如果能在 10.8.3 发布之前得到它会特别好，因为我认为这是一个相当大的问题。请记住，这是我们依靠 HTML5 做好的事情，以便它真正杀死 Flash。

更新:

  • Mountain Lion 10.8.3 12D68(Retina Macbook Pro 15.4")上的 Safari 版本 6.0.3 (8536.28.10) 仍然存在此问题
  • Windows (5.1.7) 上的 Safari 不会出现此错误
  • Lion 10.7.5(Macbook Air 2011 年中)上的 Safari 版本 6.0.2 (7536.26.17) 不存在此错误

最佳答案

有几种不同的方法可以减少闪烁。然而，最大的问题是它们似乎“碰运气”。因此，您必须尝试几个，看看哪个有助于解决问题。

但它们都围绕着同样的几件事:

-webkit-transform: translateZ(0);  /* triggers GPU, sometimes fixes the issue */
transform: translateZ(0);  /* non-webkit specific */

如果这不能完全解决问题，请尝试:

-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
perspective: 1000;

如果这也失败了，试试这个:

-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

您可以通过 W3C 阅读它们中的每一个。但它们都在不同的情况下为我工作，动画不流畅，动画闪烁，包括一些非常奇怪的动画，比你的 fiddle 跳动得多。

他们会进入动画的 div。

关于javascript - OSX 上的 Safari 6 中的 CSS3 闪烁(但这不是闪烁到白色的问题!)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14914650/

javascript这不Safaricodewebkitcsscss-transitions

有关javascript - OSX 上的 Safari 6 中的 CSS3 闪烁(但这不是闪烁到白色的问题!)的更多相关文章

  1. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  2. ruby - 通过 RVM (OSX Mountain Lion) 安装 Ruby 2.0.0-p247 时遇到问题 - 2

    我的最终目标是安装当前版本的RubyonRails。我在OSXMountainLion上运行。到目前为止，这是我的过程:已安装的RVM$\curl-Lhttps://get.rvm.io|bash-sstable检查已知(我假设已批准)安装$rvmlistknown我看到当前的稳定版本可用[ruby-]2.0.0[-p247]输入命令安装$rvminstall2.0.0-p247注意:我也试过这些安装命令$rvminstallruby-2.0.0-p247$rvminstallruby=2.0.0-p247我很快就无处可去了。结果:$rvminstall2.0.0-p247Search

  3. ruby-on-rails - date_field_tag，如何设置默认日期？ [ rails 上的 ruby ] - 2

    我想设置一个默认日期，例如实际日期，我该如何设置？还有如何在组合框中设置默认值顺便问一下，date_field_tag和date_field之间有什么区别？ 最佳答案 试试这个:将默认日期作为第二个参数传递。youcorrectlysetthedefaultvalueofcomboboxasshowninyourquestion. 关于ruby-on-rails-date_field_tag，如何设置默认日期？[rails上的ruby]，我们在StackOverflow上找到一个类似的问

  4. ruby-on-rails - openshift 上的 rails 控制台 - 2

    我将我的Rails应用程序部署到OpenShift，它运行良好，但我无法在生产服务器上运行“Rails控制台”。它给了我这个错误。我该如何解决这个问题？我尝试更新ruby​​gems，但它也给出了权限被拒绝的错误，我也无法做到。railsc错误:Warning:You'reusingRubygems1.8.24withSpring.UpgradetoatleastRubygems2.1.0andrun`gempristine--all`forbetterstartupperformance./opt/rh/ruby193/root/usr/share/rubygems/rubygems

  5. ruby-on-rails - 相关表上的范围为 "WHERE ... LIKE" - 2

    我正在尝试从Postgresql表(table1)中获取数据，该表由另一个相关表(property)的字段(table2)过滤。在纯SQL中，我会这样编写查询:SELECT*FROMtable1JOINtable2USING(table2_id)WHEREtable2.propertyLIKE'query%'这工作正常:scope:my_scope,->(query){includes(:table2).where("table2.property":query)}但我真正需要的是使用LIKE运算符进行过滤，而不是严格相等。然而，这是行不通的:scope:my_scope,->(que

  6. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  7. ruby - rbenv 安装 ruby​​ 校验和不匹配 osx - 2

    我已经在mountainlion上成功安装了rbenv和ruby​​build。运行rbenvinstall1.9.3-p392结束于:校验和不匹配:ruby-1.9.3-p392.tar.gz(文件已损坏)预期f689a7b61379f83cbbed3c7077d83859，得到1cfc2ff433dbe80f8ff1a9dba2fd5636它正在下载的文件看起来没问题，如果我使用curl手动下载文件，我会得到同样不正确的校验和。有没有人遇到过这个？他们是如何解决的？ 最佳答案 tl:博士；使用浏览器从http://ftp.rub

  8. ruby-on-rails - Ruby - 如何从 ruby​​ 上的 .pfx 文件中提取公钥、rsa 私钥和 CA key - 2

    我有一个.pfx格式的证书，我需要使用ruby​​提取公共(public)、私有(private)和CA证书。使用shell我可以这样做:#ExtractPublicKey(askforpassword)opensslpkcs12-infile.pfx-outfile_public.pem-clcerts-nokeys#ExtractCertificateAuthorityKey(askforpassword)opensslpkcs12-infile.pfx-outfile_ca.pem-cacerts-nokeys#ExtractPrivateKey(askforpassword)o

  9. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  10. 带有 attr_accessor 的类上的 Ruby instance_eval - 2

    我了解instance_eval和class_eval之间的基本区别。我在玩弄时发现的是一些涉及attr_accessor的奇怪东西。这是一个例子:A=Class.newA.class_eval{attr_accessor:x}a=A.newa.x="x"a.x=>"x"#...expectedA.instance_eval{attr_accessor:y}A.y="y"=>NoMethodError:undefinedmethod`y='forA:Classa.y="y"=>"y"#WHATTT?这是怎么回事:instance_eval没有访问我们的A类(对象)然后它实际上将它添加到

随机推荐