Bootstrap 3.1.1 Affix and Youtube Issue

Question

Is there any reason why Affix spazzes out when there is a youtube embedded on the page? The left sidebar (which is what I'm affixing) doesn't affix when you scroll. In the second screenshot, I hovered over the sidebar to get a couple elements to pop up so you could see it. I removed the youtube video and it worked just fine. I can post more specific information if needed... I just could not find any resources online where this particular issue was brought up.

Answer 1

The solution is to add:

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

to the .sidebar-affix class.

The reason is that .ytp-force-transform has the following styles:

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

and this was impacting the rendering of the sidebar. The simple fix is just to add the translate3d(0,0,0) style to the sidebar so youtube's css no longer interferes with it.

Here's a good explanation of what translate3d(0,0,0) does: http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/