在webkit浏览器中通过Javascript重新编写CSS减速

Question

我一直在研究一个使用CSS3过渡的幻灯片脚本,或者当它们不可用时使用jQuery的动画.我已经创建了一个自定义函数来执行幻灯片动画,这样做是恰当的.一切似乎都运转良好,但我在测试过程中遇到了一个重大障碍.

出于这样或那样的原因,在大型幻灯片上转换之前和之后应用jQuery CSS会有很大的延迟.例如,下面链接中的幻灯片显示大约9900像素宽(容器宽度,其中大部分是隐藏的).使用CSS3过渡和变换属性操纵容器以显示适当的幻灯片.延迟发生在下面的粘贴中的第75-82行之间应用CSS.特别是,应用"转换"CSS会导致问题.将"过渡"CSS添加到样式表(而不是将其应用于JS),并且延迟消失.然而,这并不是一个真正的解决方案,因为我们只想在特定属性上使用CSS3过渡,这可能会有所不同(在样式表中使用'all'会转换一些我们不想动画的CSS,但会定期更改).

动画功能:http: //pastebin.com/9wumQvrP

幻灯片演示:http://www.matthewruddy.com/demo/？ p = 2431

真正的问题在于iOS,其中幻灯片(有时甚至是浏览器)变得完全无法使用.我无法查明任何错误,并且确实已经耗尽了调试JS的知识.在玩了一下之后,我确定它与该功能的这一部分有关,并且在插件中禁用CSS3支持完全消除了这个问题.

我完全陷入困境,非常感谢任何人都可以给予的任何帮助.

---编辑---

我尝试使用原生Javascript而不是jQuery的.css函数来应用CSS.结果相同,没有更好的表现.另外值得注意的是,这在Firefox中根本不会发生,而且似乎只是Webkit浏览器的一个问题.

任何有解决方案的人都乐意为几瓶啤酒捐款!我真的想不出这个!

---第二次编辑---

好的,所以一直在调试,我可以看到减速是由浏览器重绘周期引起的,这需要很长时间.是否有更好的方法来处理它已经做的方式？绝对定位元素是减少重绘的一种已知方法,但由于幻灯片显示是响应的,因此这种方法并不真正有效.绝对定位幻灯片图像或幻灯片本身会导致它崩溃.

---第三次编辑---

一天后,我取得了一些进展.通过原始帖子中提到的自定义动画功能添加"内联CSS过渡"属性,从而为元素样式表CSS添加"过渡:所有0轻松".这会导致显着的性能提升,尤其是在转换本身完成时删除内联CSS转换属性时.

好东西!但是,现在在转换后删除内联CSS转换(用于创建硬件加速转换效果本身)并且正在应用左定位时,仍然存在减速.当两者一起发生时,就会出现放缓.

将它们分解为两个单独的任务(删除转换,然后在没有指定时间的情况下在setTimeout中添加左侧位置),再次摆脱重绘=性能增益,看起来好像问题已解决.但有时候,CSS过渡属性不会被足够快地否定,并且翻译删除会变得生动.没有好处,也不知道下一步在哪附近工作.

Answer 1

好吧，我想我已经弄清楚了！正如您所知，原始帖子链接并不反映我在本地主机环境中所做的更改。

绝对定位幻灯片容器解决了转换发生后重绘速度出现的问题（同时应用 CSS 属性）。显然，将它们从 DOM 中取出已经达到了目的，使得绘画能够更有效地进行。

我最初没有尝试太多，因为我知道这会给调整大小功能增加很多工作。我原本打算在 JS 中根本不调整大小，而是依靠百分比来完成肮脏的工作。绝对定位容器会导致幻灯片视口折叠，从而使本机调整大小变得无用。

然而，无论如何，我已经在其他浏览器中遇到了子像素渲染的问题，所以我想是时候硬着头皮依靠固定像素值了。然后我使用 JS 来处理调整大小，使用窗口调整大小事件。一切看起来都不错，但由于定位问题，幻灯片仍然折叠起来。分配高度值无法正常工作，因此有点不知所措。

值得庆幸的是，我遇到了一个巧妙的小技巧，将幻灯片视口的“padding-top”设置为动态计算的百分比值（所需的幻灯片高度，在该脚本的设置面板中设置，除以所需的宽度）。由于 padding-top 百分比与元素的宽度相关，因此这在提供响应高度和再次纠正视口（不再看起来折叠）方面做得很好。

以下是有关使用 padding-top 来保持纵横比的响应式元素的一些信息。很棒的小技巧：http://f6design.com/projects/responsive-aspect-ratio/

现在一切都很好，并且在 iOS 和 webkit 浏览器中运行良好。一切都非常快并且按其应有的方式进行。四天过去了，事情终于弄清楚了。对于必须诉诸 JS 来调整大小感到不高兴，但我想由于浏览器之间的百分比不一致，这种情况总是会发生。很多小数 = 不好！

感谢所有试图为我指明正确方向的人。确实让我思考，并学到了很多调试技巧，我可以再次使用这些技巧来确保过渡表现良好。再次感谢！