CSS Transforms & sub-pixel rendering
HTML
<div class="cloud cloud1">
<p>No subpixel rendering... notice the jitter in both webkit and gecko</p>
</div>
CSS
body {
background-color: #cdf;
}
img { display: block; width: 50%; }
.parent{
width:200px;
height:400px;
position:relative;
display: block
}
.cloud {
display: block;
width:200px;
height:100px;
background:green;
transform:translate(150px,150px);
}
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(' +...