【问题标题】: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 - 没问题,这不是一个明显的问题!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2014-04-11
  • 2013-08-09
  • 1970-01-01
  • 1970-01-01
  • 2012-06-14
  • 1970-01-01
  • 2016-08-04
相关资源
最近更新 更多