Fullsize background videos in webkit browsers

Note: As of writing the used Google Chrome version is 34.0.1847.116 m

Depending on the website you’re building, a fullsize background video can really add to the atmosphere. You’d think that the worst part will be to get it to work in IE, but alas that’s not the case. In fact in IE9+ this is as easy as pie, just like in Firefox or Opera, even though you need a different format than H264 for Opera (Theora or WebM).

The real show-stopper is actually webkit. Adding a video to the background of your page using the following css leads to quite some problems:

Note: The above gist does not deal with the problem of getting the video to actually cover the full screen, since the video will always maintain its aspect ratio.

After you’ve added your video to the background you will notice that as soon as you want to position any element using position:fixed, webkit will start to act up and the element will not stay in place, but rather scroll with the content and have rendering bugs. As mentioned in this stackoverflow.com post the solution for this is rather easy. Just add the following snippet to your elements with fixed positioning and they will behave properly again:

So far so good. Unfortunately, when trying to apply a fixed background image to a container, which is stacked above your background video, this background image will have rendering issues. To be more concrete: the image will not be displayed at all or only partially. And it looks really, really ugly. There is a fix for this, but it comes with its own tradeoff. When adding any overflow rule to your html and body tags, like overflow, overflow-x or overflow-y, webkit will display the background image properly.

There are two things which are now broken though. First of all, you cannot listen to the scroll event on the window object anymore. It won’t emit anything. Luckily this can be countered by adding a listener to the body element instead.

So that’s not that bad now, is it? Unfortunately it gets worse. By adding an overflow rule, webkit browsers will lose their ability to process body.scrollTop, so you’ll end up with something like this:

Oh and window.scrollTo() is broken too.

So all in all these are quite some tradeoffs to make a background video work in webkit. If you do not need to use scrollTop or scrollTo(), then using an overflow rule will surely solve your problem. If that is not an option, the following test might help to ease the pain, by detecting browsers, which are buggy with overflow-x and then add a class to the body so backgrounds can be handled differently:

Using transition effects on pseudo elements in IE

Every now and then you want to use a  transition effect to spice up your layout a bit. Imagine for example a folded corner on a container which moves a bit when you hover the container.

In browsers like Chrome and Firefox this does not pose a problem. Just add your transition and you’re done.  In IE on the other hand you will notice that your precious transition will not work at all, if you are targeting a pseudo element like :before and :after. The solution to this is thankfully rather easy. All you have to do, is to set a property on your parent container, in addition to your changes of the pseudo element. This does not have to be a new property, you can just re-set an existing one, for example position like this this snippet:

You cannot apply any changes to :before or :after pseudo elements in IE without also modifying their parent element to trigger a repaint. So despite the headline or this post being related to transitions on pseudo elements, this is a fix for any kind of hover-related change on pseudo elements in IE.

The following pen shows an example. Both sides will work fine in Chrome, Firefox, etc. but the left version will not work in IE. The right one will, though.

See the Pen Pseudo element IE hover transition fix by Amin Poursaied (@johanneslumpe) on CodePen