一起记录 Firefox/jQuery/CSS 动画的错误？

Posted 2023-03-06

【中文标题】一起记录 Firefox/jQuery/CSS 动画的错误？

【英文标题】：Documented bugs of Firefox/jQuery/CSS animations together?

【发布时间】：2013-08-29 02:31:15

【问题描述】：

我正在编写一个使用 jquery 切换 CSS 类的网站，这些类运行 CSS 动画。

在 Google Chrome 和 Internet Explorer 9/10 中一切正常，在 Firefox（Aurora 24 和 Firefox 23）上不执行动画，但其余部分正常。

因此，例如，如果我单击一个应该隐藏一个框并显示另一个框的按钮，则在 Chrome 上执行动画时平滑过渡，在 Firefox 上执行时不平滑过渡。

奇怪的是，如果我通过控制台更改应该动画的 CSS 值，动画就会起作用。

该网站有大约 10 个动画同时运行，但只有 5 个可以正常运行。 尝试禁用最后一个（和更重的）3 个动画可以解决问题。所以也许这是 Firefox 没有妥善管理的一种过载...？

我无法提供 JSFiddle，因为当我编写一个 JSFiddle 时它可以工作，因此无法显示问题...

这是导致问题的代码部分：

console.log("3D Accelerated animation");        

console.log("oldpage = "+oldpage+"\npage = "+page+"\nnewpage = "+newpage);

if(oldpage != newpage) eoldpage.removeClass("active"); 
$(".slider > li").attr("style", "").removeClass("animation");

epage.css("transform": "translate3d(0, 0, 0)");

enewpage
.css("transform": "translate3d(" + pagew * db + "px, 0, 0)")
.addClass("active");

eboth.addClass("animation");

enewpage.children("section").load('/pages/' + newpage + ".php?lang=" + lang, function() 

    var hmorpher = enewpage.children().height();
    $("#heightmorpher").css("height": hmorpher);
    $(".parallax").css("height": Math.pow(hmorpher + 200, 600));

    epage.css("transform": "translate3d(" + (pagew * da * 2) +"px, 0px, 0px)");
    enewpage.css("transform": "translate3d(0px, 0px, 0px)");


    $("body").removeClass("active");

);

我知道没有工作示例就不容易理解。 总之，这部分代码生成的动画是一种页面滑块，当前页面向左或向右滑动（取决于菜单中相对于新调用页面的位置），新页面在同时从相反的方向。 我使用这个插件：https://github.com/zachstronaut/jquery-css-transform 在所有浏览器上进行动画转换。

所以我在这里只是想问问是否有人知道 Firefox 的这种行为的错误。

。

编辑：

这里是页面的现场演示： http://demo.mywebexpression.com/customers/pelplastic/

有点问题，因为我用“将页面另存为...”导出它，顺便点击FIRST CLICK ME!!菜单项，然后尝试在两者之间切换两个 CLICK ME 菜单项。

谁谈论供应商前缀：

这个 Fiddle 告诉你 Firefox 支持无前缀版本，所以问题不在于供应商前缀：

http://jsfiddle.net/3wM2V/1/

【问题讨论】：

除了 jsfiddle 之外，您是否可以在 Web 服务器的某个地方放置一个无法正常运行的页面的示例，或者将 html、JS 和 CSS 粘贴到单独的代码框中？跨度>

谢谢，刚刚添加

当我点击您在该页面上描述的内容时，我什至看不到您描述的部分动画。与其把一些“有点错误”的东西放在那里，不如放一个完整的例子来说明什么是不工作的。如果“将页面另存为...”导致它出现问题，请不要使用该功能。

只需点击 first click me!!! 标签，然后使用两个 click me 标签，它适用于 Chrome 和 Explorer 10，但在 Firefox 中，页面幻灯片动画只工作了一半

您提供的链接 demo.mywebexpression.com/customers/pelplastic 正在重定向到 demo.mywebexpression.com/home 。该页面上没有标签；只有一个似乎是无样式链接的列表。您可能需要清除缓存并更正问题，然后才能观察到不正确的行为。

【参考方案1】：

我认为问题在于您使用 CSS3 规则 -webkit-tranform 这仅涵盖“webkit”浏览器。

相反，您需要设置所有浏览器特定规则：

-webkit-transform: translate3d(0px, 0px, 0px);  /* Chrome, Safari 3.1+ */
-moz-transform:    translate3d(0px, 0px, 0px);  /* Firefox 3.5-15 */
-ms-transform:     translate3d(0px, 0px, 0px);  /* IE 9 */
-o-transform:      translate3d(0px, 0px, 0px);  /* Opera 10.50-12.00 */ 
transform:         translate3d(0px, 0px, 0px);  /* Firefox 16+, IE 10+, Opera 12.10+ */

此站点http://css3please.com/ 将有很大帮助，它会生成带有浏览器特定名称的 css3。

希望有帮助:)

【讨论】：

不，我已经说过，如果我在调试控制台中更改值，动画将被执行，Firefox 也支持不带前缀的转换，顺便说一下我使用的是 jQuery 插件（我已经在我的问题中说过），它会在需要的地方自动添加供应商前缀。

嗨 Fez，如果我在您已链接的演示站点上将值从 -webkit-transform 更改为 -moz-transform，则它可以在 Firefox 中运行。因此我的建议是，您的插件似乎没有添加正确的规则。

您在哪里添加了-moz-transform？在我的 CSS 中，transition-property 中只有一个 -webkit-transform，我还添加了 -moz-transform，但它不起作用。

在ul.slider li 上，我只是用正确的-moz 前缀规则替换当前存在的-webkit-transform。

transition-property: -moz-transform,transform,left; ?它不起作用。并且 Firefox 23 支持无前缀版本。 caniuse.com/#search=transform 顺便说一句，如果问题是这样的话，它就无法在调试控制台中编辑值。