Safari 9 fix for sizes detection

sshyran · Oct 21, 2015 · f2d3d46 · f2d3d46
1 parent 06bf811
commit f2d3d46
Showing 1 changed file with 27 additions and 2 deletions.
diff --git a/feature-detects/img/sizes.js b/feature-detects/img/sizes.js
@@ -1,6 +1,7 @@
 /*!
 {
   "name": "sizes attribute",
+  "async": true,
   "property": "sizes",
   "tags": ["image"],
   "authors": ["Mat Marquis"],
@@ -16,6 +17,30 @@
 /* DOC
 Test for the `sizes` attribute on images
 */
-define(['Modernizr', 'createElement'], function(Modernizr, createElement) {
-  Modernizr.addTest('sizes', 'sizes' in createElement('img'));
+define(['Modernizr', 'createElement', 'addTest'], function(Modernizr, createElement, addTest) {
+  Modernizr.addAsyncTest(function() {
+    var width1, width2, test;
+    var image = createElement('img');
+    // in a perfect world this would be the test...
+    var isSizes = 'sizes' in image;
+
+    // ... but we need to deal with Safari 9...
+    if (!isSizes && ('srcset' in  image)) {
+      width2 = 'data:image/gif;base64,R0lGODlhAgABAPAAAP///wAAACH5BAAAAAAALAAAAAACAAEAAAICBAoAOw==';
+      width1 = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
+
+      test = function(){
+        addTest('sizes', image.width == 2);
+      };
+
+      image.onload = test;
+      image.onerror = test;
+      image.setAttribute('sizes', '9px');
+
+      image.srcset = width1 + ' 1w,' + width2 + ' 8w';
+      image.src = width1;
+    } else {
+      addTest('sizes', isSizes);
+    }
+  });
 });