Bootstrap 3.1.1 Affix 和 Youtube 问题

【问题标题】：Bootstrap 3.1.1 Affix and Youtube IssueBootstrap 3.1.1 Affix 和 Youtube 问题
【发布时间】：2014-06-17 04:52:09
【问题描述】：

当页面上嵌入了 youtube 时，Affix 是否有任何原因会引起轰动？当您滚动时，左侧边栏（这是我要附加的）不附加。在第二个屏幕截图中，我将鼠标悬停在侧边栏上以弹出几个元素，以便您看到它。我删除了 youtube 视频，它工作得很好。如果需要，我可以发布更具体的信息...我只是无法在网上找到任何提出此特定问题的资源。

【问题讨论】：

您能否发布指向当前页面的链接或在JSFiddle 上重新创建错误？
没问题。很奇怪的是，它在 Safari 和 Firefox 中对我有用，但在 Chrome 中却没有。我会仔细看看。
相同。这是一个真正令人头疼的问题。 Github 上的 Bootstrap 家伙不想与这个问题有任何关系！
我已经缩小了一点，希望不会太长！

标签： jquery css twitter-bootstrap youtube twitter-bootstrap-3

【解决方案1】：

解决方法是添加：

-webkit-transform: translate3d(0,0,0);

到.sidebar-affix 类。

原因是.ytp-force-transform有以下样式：

-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);

这影响了侧边栏的渲染。简单的解决方法就是将translate3d(0,0,0) 样式添加到侧边栏，这样youtube 的css 就不再干扰它了。

这里很好地解释了translate3d(0,0,0) 的作用：http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/

【讨论】：

乔，非常感谢您的帮助。我需要几个小时才能将其缩小到那个范围！
@pep - 没问题，这不是一个明显的问题！