I started developing Off.canvas during a project that required the use of a hidden side panel, the kind seen often in native smartphone apps.
I needed to have the side panel(s) and the main page scroll independently and to maintain a fixed top bar during scrolling. As the panel slid in from the side I wanted the main part of the page to slide off screen, as it does in apps, rather than squash to fit the shrinking space.
Those requirements meant I had to turn the body element into a 'window' whose overflow is hidden and create the main and side sections as scrollable areas within that. To enable the scroll-ability of overflow:auto elements on older mobile operating systems such as iOS 4 and Android 2.3 I've used the Overthrow polyfill.
Initially the main section covers the side panel(s) completely, then when the sliding is triggered the main section moves aside to reveal the side bar. In fact, the side bar is positioned only partially off screen so that during animation it moves at a slightly slower speed to the main section above it to create a layered effect.
For the sliding animation I've made use of the hardware accelerated translate3D property to get it as smooth and stutter free as possible. For older none supporting browsers Modernizr gives them left or right positioning values to use instead.
Check the GitHub repo for the latest changes.