CSS Transforms & sub-pixel rendering

by ryanwheale

HTML

<div class="cloud cloud1">
    <p>No subpixel rendering... notice the jitter in both webkit and gecko</p>
    <img src="http://docs.garagegames.com/torquex/official/content/documentation/TorqueX%202D/Tutorials/images/cloud.png" alt="" />
</div>
<div class="cloud cloud2">
    <p>Subpixel rendering in webkit (not firefox), thanks to CSS3 transition</p>
    <img src="http://docs.garagegames.com/torquex/official/content/documentation/TorqueX%202D/Tutorials/images/cloud.png" alt="" />
</div>
<div class="cloud cloud3">
    <p>Subpixel rendering in webkit &amp; firefox, thanks to CSS3 rotation</p>
    <img src="http://docs.garagegames.com/torquex/official/content/documentation/TorqueX%202D/Tutorials/images/cloud.png" alt="" />
</div>

CSS

body {
    background-color: #cdf;
}
img { display: block; width: 50%; }
.cloud {
    postion: absolute;
    top: 0;
    left: 0;
}

JavaScript

(function($) {
    var propPrefixes = {},
        camelProp, 
        e, i,
        prefixes = ['', 'Moz', 'Webkit', 'O', 'ms', 'Khtml'],
        prefix = '',
        dashedPrefix = '',
        upperProp = '';
    
    function getPrefixedProp ( prop ) {
        camelProp = prop.replace(/(\-[a-z])/g, function($1){
            return $1.toUpperCase().replace('-','');
        });
        
        if (propPrefixes[camelProp] || propPrefixes[camelProp] === '') 
            return propPrefixes[camelProp] + prop;
        
        e = document.createElement('div');
        
        for (i = 0; i < prefixes.length; i++) {
            prefix = prefixes[i];
            if(prefix) {
                dashedPrefix = '-' + prefix.toLowerCase() + '-';
                upperProp = prop.charAt(0).toUpperCase() + prop.substring(1);
            }
            
            if (typeof e.style[prefix + upperProp] !== 'undefined') {
                propPrefixes[camelProp] = dashedPrefix;
                return dashedPrefix + prop;
            }
        }
        
        e = null; // prevent memory leak - IE
        return '';
    }
    
    $(function() {
        var $cloud1 = $('.cloud1'),
            $cloud2 = $('.cloud2'),
            $cloud3 = $('.cloud3'),
            cloudPos = 0.0,
            offset = .2,
            interval = 50;
        
        // Triggers subpixel rendering in webkit, but not firefox
        // jQuery 1.8.2+ will handle prefixing the "transition" property
        $cloud2.css('transition', getPrefixedProp('transform') + ' ' + interval + 'ms linear');
        
        // console.log( getPrefixedProp('transform') );
        setInterval(function() {
            cloudPos += offset;
            $cloud1.css('transform', 'translate(' + cloudPos + 'px, 0)');
            $cloud2.css('transform', 'translate(' + cloudPos + 'px, 0)');
            // Triggers subpixel rendering in firefox and webkit, thx to rotation
            $cloud3.css('transform', 'translate(' +...