CSS转换混乱与Webkit上的百分比宽度（错误？）

Question

我在这里有一个CodePen：

http://codepen.io/CWSpear/pen/BCriE

这个想法是应用程序有一个侧边栏，您可以单击“展开”以使内容区域全宽。如果您仍想调出侧边栏，可以点击“弹出窗口”以使侧边栏重新出现在内容上（也许您只能在纵向模式下选择弹出窗口，就像iPad上的Mail应用程序一样）。

我做了一个类切换方法，因为它使JavaScript变得非常简单，所有内容都是通过CSS Transitions完成的。

问题是，即使内容区域的标题/工具栏没有宽度，因此应该始终是内容区域的整个宽度，但是当您单击展开时，其他所有内容都有效，除了标题的宽度不会改变。

这只发生在Webkit中。它似乎计算了“100％”是什么，即使我更改内容的填充（由于我的盒子大小调整，使内容更宽），标题仍保持相同的宽度。在回来的路上似乎反其道而行之。当我再次单击展开（通常可能会说现在我认为崩溃）时，它会使标题成为整个宽度，但是当内容添加填充时，它不会重新调整宽度，现在标题是内容太宽了。

让我说明一下：

在：

单击展开，您将获得：

以下是预期的内容：

它在Firefox中运行良好。还应该注意的是，如果您手动调整窗口大小，它会重新绘制区域并修复标题（这就是我实际获得“预期”屏幕截图的方式）。使用JavaScript触发调整大小似乎不起作用（因为我认为不会触发重绘）。

我尝试设置明确的'100％'宽度以及其他JavaScript技巧和黑客试图在标题上设置百分比宽度而没有运气。

是否有其他人遇到此问题或进行修复？

它在Safari 6.0.1和Chrome 22.0.1229.79中被破解，并在Firefox 15.0.1中运行。就像一个冠军，那个Firefox。

[更新] 它似乎只与padding有关，因为ahren能够通过切换到margin来修复它。这是有效的，因为内容的宽度是自动的。如果宽度为100％，则会破坏它。

在此演示：http://codepen.io/CWSpear/pen/uvFJh

保证金很好，直到我将width: 100%放在元素上，然后即使在box-sizing: border-box中它也会突破开。

出于某种原因，当我设置width: auto时，我工作的实际项目完全折叠了内容，即使它绝对是display: block。我正在尝试重现它并为此发布CodePen。

这确实是一个Webkit错误吗？还有其他选择吗？

Answer 1

http://codepen.io/anon/pen/fzrkm

我已将padding-left更新为margin-left，这似乎在Chrome和Firefox中有用。

我希望我能为您提供更多详细信息，说明为什么这会修复您的错误。

Answer 2

我最近遇到了同样的问题。

正如你所说，我还必须使用保证金而不是填充。 至少这是一个已知问题：https://bugs.webkit.org/show_bug.cgi?id=93876