From da1a81861a09a0a2bb6abbb7473a2be96315be6f Mon Sep 17 00:00:00 2001 From: SBShane Date: Fri, 19 Apr 2013 11:01:48 -0400 Subject: [PATCH 1/3] Update transform.js Added method to determine if 3d Transforms are supported. Added a hook to replace 3d Transforms with their 2d counterparts if the former are not supported. --- transform.js | 50 +++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 43 insertions(+), 7 deletions(-) diff --git a/transform.js b/transform.js index db58781..86ce9aa 100644 --- a/transform.js +++ b/transform.js @@ -26,24 +26,31 @@ var div = document.createElement('div'), propertyName = 'transform', suffix = 'Transform', testProperties = [ - 'O' + suffix, - 'ms' + suffix, - 'Webkit' + suffix, - 'Moz' + suffix, + ['O' + suffix, '-o-' + propertyName], + ['ms' + suffix, '-ms-' + propertyName], + ['Webkit' + suffix, '-webkit-' + propertyName], + ['Moz' + suffix, '-moz-' + propertyName], // prefix-less property - propertyName + [propertyName, propertyName] ], i = testProperties.length, supportProperty, supportMatrixFilter, + support3dTransform = false, propertyHook, propertyGet, rMatrix = /Matrix([^)]*)/; // test different vendor prefixes of this property while ( i-- ) { - if ( testProperties[i] in divStyle ) { - $.support[propertyName] = supportProperty = testProperties[i]; + if ( testProperties[i][0] in divStyle ) { + $.support[propertyName] = supportProperty = testProperties[i][0]; + // test for 3d Transforms support - http://tiffanybbrown.com/2012/09/04/testing-for-css-3d-transforms-support/ + if( ! support3dTransform) { + divStyle[testProperties[i][0]] = 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'; + support3dTransform = window.getComputedStyle(div).getPropertyValue(testProperties[i][1]); + support3dTransform = support3dTransform !== undefined && support3dTransform !== 'none'; + } continue; } } @@ -94,6 +101,35 @@ if ( supportProperty && supportProperty != propertyName ) { ) } } + // If 3d Transforms are not supported, replace them with 2d counterparts + } else if ( ! support3dTransform) { + propertyHook = { + set: function( elem, value ) { + if(value.indexOf('3d') > 0) { + // This method gets the params including format (px, em, pt, etc) + var matches = value.match(/\((.+?)\)/); + var params = matches[1].replace(/ /g, '').split(','); + var type = value.split('('); + value = type[0].replace('3d', ''); + switch(type[0]) { + // Convert matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) to matrix(n,n,n,n,n,n) + case 'matrix3d': + // TODO: run calculation to convert matrix3d to matrix + break; + // Convert rotate3d(x,y,z,deg) to rotate(deg) + case 'rotate3d': + value = value + '(' + params[3] + ')'; + break; + // Convert scale3d(x,y,z) to scale(x,y) and translate3d(x,y,z) to translate(x,y) + case 'scale3d': + case 'translate3d': + value = value + '(' + params[0] + ', ' + params[1] + ')'; + break; + } + } + elem.style[supportProperty] = value; + } + } } /* TODO: leverage hardware acceleration of 3d transform in Webkit only else if ( supportProperty == 'Webkit' + suffix && support3dTransform ) { From e6825d2580e739df05b3ffdf9faabc0322d6f9f2 Mon Sep 17 00:00:00 2001 From: SBShane Date: Fri, 19 Apr 2013 11:07:31 -0400 Subject: [PATCH 2/3] Update transform.js Fix 3d Transform to 2d Transform conversion to work with jQuery 1.5.1 and under --- transform.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/transform.js b/transform.js index 86ce9aa..fbe817f 100644 --- a/transform.js +++ b/transform.js @@ -101,8 +101,10 @@ if ( supportProperty && supportProperty != propertyName ) { ) } } + } + // If 3d Transforms are not supported, replace them with 2d counterparts - } else if ( ! support3dTransform) { + if ( ! support3dTransform) { propertyHook = { set: function( elem, value ) { if(value.indexOf('3d') > 0) { From 12e108fbd85b34b0c25c7dea250f0f350d750052 Mon Sep 17 00:00:00 2001 From: SBShane Date: Mon, 29 Apr 2013 15:08:10 -0400 Subject: [PATCH 3/3] Update transform.js, gradients.js transform.js: - Fix support3dTransform for opera (have to insert and remove test div) gradient.js: - Default directions for linear gradients are different than browser extension directions --- gradients.js | 9 ++++++++- transform.js | 4 ++++ 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/gradients.js b/gradients.js index f553434..764e90a 100755 --- a/gradients.js +++ b/gradients.js @@ -30,10 +30,18 @@ cssLinear = "background-image: -moz-linear-gradient(red, blue);background-image: -webkit-linear-gradient(red, blue);background-image: -o-linear-gradient(red, blue);background-image: linear-gradient(red, blue);", cssRadial = "background-image: -moz-radial-gradient(circle, orange, red);background-image: -webkit-radial-gradient(circle, orange, red);background-image: -o-radial-gradient(circle,red, blue);background-image: radial-gradient(circle, orange, red);", cssPropsArray = cssProps.split( rWhitespace ); + linearDirections = ["to bottom", "to top", "to right", "to left"]; + browserLinearDirections = ["top", "bottom", "left", "right"]; divStyle.cssText = cssLinear, linearSettings = function ( value ) { var parts = rLinearSettings.exec( value ); value = value.replace( new RegExp(parts[2], 'g') , $.support.linearGradient ); + // Default linear directions are different than browser extension directions so replace if necessary + for(var i = 0; i < linearDirections.length; i++) { + if(value.indexOf(linearDirections[i]) > -1) { + value = value.replace(linearDirections[i], browserLinearDirections[i]); + } + } return value; }, radialSettings = function ( value ) { @@ -65,7 +73,6 @@ $.cssHooks[ prop ] = { set: function( elem, value ) { - if( rLinear.test( value ) ){ elem.style[ prop ] = linearSettings( value ); } else if ( rRadial.test( value ) ) { diff --git a/transform.js b/transform.js index fbe817f..6081d93 100644 --- a/transform.js +++ b/transform.js @@ -47,9 +47,13 @@ while ( i-- ) { $.support[propertyName] = supportProperty = testProperties[i][0]; // test for 3d Transforms support - http://tiffanybbrown.com/2012/09/04/testing-for-css-3d-transforms-support/ if( ! support3dTransform) { + // have to insert div to test + document.body.appendChild(div); divStyle[testProperties[i][0]] = 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'; support3dTransform = window.getComputedStyle(div).getPropertyValue(testProperties[i][1]); support3dTransform = support3dTransform !== undefined && support3dTransform !== 'none'; + // remove test div + document.body.removeChild(div); } continue; }