【发布时间】：2012-09-23 21:17:30
【问题描述】：
我这里有一个 CodePen：
http://codepen.io/CWSpear/pen/BCriE
这个想法是应用程序有一个侧边栏，您可以单击“扩展”以使内容区域全宽。如果您仍想调出侧边栏，您可以单击“Flyout”以使侧边栏重新出现在内容上（即，您可能只能选择在纵向模式下弹出，很像 iPad 上的邮件应用程序）。
我做了一个类切换方法，因为它使 JavaScript 变得非常简单，并且一切都通过 CSS 转换完成。
问题是，即使内容区域的标题/工具栏没有宽度，因此应该始终是内容区域的全宽，但是当您单击展开时，其他一切都有效，除了标题的宽度不会改变。
这只发生在 Webkit 中。似乎它计算了“100%”是什么，即使我更改了内容的填充（由于我的盒子大小，使内容更宽），标题保持相同的宽度。回来的路上似乎反其道而行之。当我再次单击展开（现在我想到它通常可能会说折叠）时，它使标题成为全宽，但是当向内容添加填充时，它不会重新调整宽度，现在标题是内容太宽。
让我举例说明：
之前：
点击展开，你会得到：
这是预期的：
它在 Firefox 中运行良好。还应该注意的是，如果您手动调整窗口大小，它会重新绘制区域并修复标题（这就是我实际获得“预期”屏幕截图的方式）。使用 JavaScript 触发调整大小似乎不起作用（因为我认为这不会触发重绘）。
我尝试设置显式的“100%”宽度和其他 JavaScript 技巧和黑客尝试在标题上设置百分比宽度，但没有成功。
有其他人遇到过这个问题或有解决办法吗？
它在 Safari 6.0.1 和 Chrome 22.0.1229.79 中被破坏，并在 Firefox 15.0.1 中工作。像冠军一样，那个 Firefox。
[更新] 它似乎只与填充有关，因为 ahren 能够通过切换到边距来修复它。这很有效，因为内容的宽度是自动的。如果它是 100% 宽度，那么它会破坏它。
这里的演示：http://codepen.io/CWSpear/pen/uvFJh
在我将width: 100% 放在元素上之前，边距效果很好，然后它会开箱即用，即使在box-sizing: border-box 中也是如此。
由于某种原因，当我设置width: auto 时，我正在工作的实际项目完全折叠了内容，即使它绝对是display: block。我正在尝试重现它并为此发布 CodePen。
这确实是一个 Webkit 错误吗？还有其他选择吗？
【问题讨论】：
-
我在 Chrome 中看到过类似的情况，其中隐藏/调整/显示序列导致了必要的元素重绘。就我而言，我正在对元素应用填充。如果没有这个 hack，填充直到下一次调整大小才会出现。
-
我可以在哪里触发它？ CSS 转换没有任何回调。另外，如果它像在 Firefox 中那样随着过渡而扩展，那就太好了。
-
不知道如何将其与过渡相结合......只是想我会提到它。
标签： jquery css webkit width css-transitions