csstransform3d detect should prefer css conditionals - fixes Moderniz…

…r#1512 Use Modernizr detect for supports in transforms3d
patrickkettner · Feb 5, 2015 · a54308e · a54308e
1 parent 8aa80ae
commit a54308e
Showing 1 changed file with 11 additions and 6 deletions.
diff --git a/feature-detects/css/transforms3d.js b/feature-detects/css/transforms3d.js
@@ -9,7 +9,7 @@
   ]
 }
 !*/
-define(['Modernizr', 'testAllProps', 'testStyles', 'docElement'], function( Modernizr, testAllProps, testStyles, docElement ) {
+define(['Modernizr', 'testAllProps', 'testStyles', 'docElement', 'test/css/supports'], function( Modernizr, testAllProps, testStyles, docElement ) {
   Modernizr.addTest('csstransforms3d', function() {
     var ret = !!testAllProps('perspective', '1px', true);
     var usePrefix = Modernizr._config.usePrefixes;
@@ -19,12 +19,17 @@ define(['Modernizr', 'testAllProps', 'testStyles', 'docElement'], function( Mode
     //   some conditions. As a result, Webkit typically recognizes the syntax but
     //   will sometimes throw a false positive, thus we must do a more thorough check:
     if ( ret && (!usePrefix || 'webkitPerspective' in docElement.style )) {
-
+      var mq;
-      // Webkit allows this media query to succeed only if the feature is enabled.
+      // Use CSS Conditional Rules if available
-      // `@media (transform-3d),(-webkit-transform-3d){ ... }`
+      if (Modernizr.supports) {
+        mq = '@supports (perspective: 1px)';
+      } else {
+        // Otherwise, Webkit allows this media query to succeed only if the feature is enabled.
+        // `@media (transform-3d),(-webkit-transform-3d){ ... }`
+        mq = '@media (transform-3d)';
+        if (usePrefix ) mq += ',(-webkit-transform-3d)';
+      }
       // If loaded inside the body tag and the test element inherits any padding, margin or borders it will fail #740
-      var mq = '@media (transform-3d)';
-      if (usePrefix ) mq += ',(-webkit-transform-3d)';
       mq += '{#modernizr{left:9px;position:absolute;height:5px;margin:0;padding:0;border:0}}';
 
       testStyles(mq, function( elem ) {