CSS Transform Translate Breaking Youtube Embedded Video

CSS transform translate breaking Youtube Embedded Video

It seems this is a problem with Flash on Firefox, if you force YouTube's HTML5 player then the problem is fixed.

http://jsfiddle.net/8EMzc/

You do this by appending &html5=1 to YouTube's embed URL. I suppose that if HTML5 is not supported it will fall back to Flash, but I'm not sure about this. You could also browser sniff and serve the HTML5 player to Firefox only (not recommended, but you're working around a bug, so there's no straightforward way to address this).

Alternatively, you can disable CSS transforms in Isotope with the transformsEnabled option

$('#container').isotope({
  transformsEnabled : false
});

Youtube iframe embedded video not working (black screen)

What CSS styling are you using on your iframe? http://argylesocial.com used border-radius on youtube html5 iframes, and removing those style declarations resolved the problem.

I had to remove both -moz-border-radius and border-radius the get video to properly display. Works like a charm now!

HTML5 video causes chrome to stutter CSS transitions

The entire screen is painting on every scroll.

This is caused (in your case) by having fixed elements on your page. A fixed element will cause a paint on every scroll because the fixed element stays in place and the content underneath moves causing the browser to have to repaint the screen in order to display the content properly.

Painting

In the painting stage, the render tree is traversed and the renderer's "paint()" method is called to display content on the screen. Painting uses the UI infrastructure component.

source

There are a few things you can do:

1. Keep your video contained to your div and in the top part of the page by making the container not fixed.
2. Use less fixed element if you can.
3. Use css transforms translate() instead of a transition on position.
4. Promote fixed elements to their own layer with translateZ(0); or css will-change

code with performance in mind

.leftbar {
    position: fixed;
    top: 0;
    left: -$leftbarwidth;
    z-index: 2;
    width: $leftbarwidth;
    height: 100%;
    background-color: $grey;
    
    /* for performance improvements: */
    -webkit-transition: -webkit-transform 0.5s ease;
    -webkit-transform: translateZ(0); /* promotes to a layer */
    &.show {
        -webkit-transform: translate3d($leftbarwidth, 0, 0);
    }
}

Promoting elements to layers

Promoting elements to their own layers will kick in hardware accelaration instead of using the CPU, if an fixed element has its own layer it will also not repaint the screen on every scroll.

-webkit-transform: translateZ(0); /* promotes to a layer */

Performance before and after.

I've change the code live on the site in the developer tools in chrome, after some small css changes we go from <30 to 60fps, heres the charts:

Before:

After:

You go from <30fps to a steady 60fps after losing some fixed elments, containing the video to its div, promoting layers and using translate() instead of position: left on transitions.

Keep in mind that you don't want to put everything on a layer, since using this too much will also affect your performance. So use in moderation

Closing notes

I'm aware there are lots of performance issues with Chrome and HTML5
video...

I do not agree with you on this, if you code your site with performance in mind you will have better or great performance, even if there are native performance issues (which i don't think html5/chrome have. correct me if i'm wrong)

Links for further reading:

• http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
• http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
• http://www.html5rocks.com/en/tutorials/speed/scrolling/
• http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/
• http://www.aerotwist.com/blog/bye-bye-layer-hacks/ no more layer hacks!

Why does isotope mess up clicks into an iFrame?

isotope uses transform: translate(0px, 0px); (in your case) on the .videoblock elements. This in turn triggers Bug 832929 - "Can't interact with iframe flash content when parent node has CSS transforms applied".

If possible, disable transforms via options.transformsEnabled.

Doing so in http://jsfiddle.net/nmaier/CkFWV/ makes it work in Firefox (Nightly on OSX, actually) for me.

isotope makes weird transform in element styles which destroys layout, why?

Alright after many hours spent on this, it seems to work now.

Reason why this occured for me and worked in fiddle:

I used 2.5 and fiddle was the 3.0 version. Never thought about this could be the reason!

Anyway, newest version works fine!

---

Related Topics