WebKit 中不稳定的 CSS3 宽度过渡答案

【问题标题】：Shaky CSS3 width transition in WebKitWebKit 中不稳定的 CSS3 宽度过渡
【发布时间】：2013-10-23 05:58:00
【问题描述】：

我正在使用packery 制作动画。瓷砖在网格中对齐，单击一个应该放大它并相应地动态重新排列瓷砖。使用 CSS3 过渡动画调整大小。所有这些都在 IE10 和 Firefox 中按预期工作，如以下代码笔所示：http://codepen.io/anon/pen/ilkmK

在基于 WebKit 的浏览器（在 Windows 上测试）中的相同代码在调整大小和重新定位时会产生疯狂的摆动/晃动。

我已经提交了issue，问题似乎是WebKit 中的宽度和高度转换没有优化。使用 jQuery.animate 实现相同的动画稍微改善了这种情况，但它并没有摆脱摆动。特别是在较慢的系统上，它仍然非常明显。

目前我使用 JavaScript 版本作为稍好一点的 fallbackf 或 webkit 浏览器，但这并不是最佳选择。我不知道从哪里开始，所以我希望 Stackoverflow 可以帮助我。

对于如何在 Chrome/Safari 中进行这项工作的任何提示，我将不胜感激。

【问题讨论】：

【解决方案1】：

我刚刚在 Mac 上的 Chrome 中尝试过这个，它工作正常，所以我无法复制这个问题。但是我有一种感觉，这可能与 webkit 浏览器加载页面时它们最初生成的图像尺寸为 0 的事实有关。

尝试将您的 jQuery 放入 $(window).load(function(){ 而不是 $(document).ready(function(){

这将在执行脚本之前等待图像加载。

【讨论】：