New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

data-uri test does not take into account IE8 32KB limit #321

Closed
alastaircoote opened this Issue Jul 13, 2011 · 7 comments

Comments

Projects
None yet
4 participants
@alastaircoote

alastaircoote commented Jul 13, 2011

IE8 will only load images provided in base 64 URIs if they are 32KB or less in length. I wrote a replacement function that test for this:

(function(){
  var datauri = new Image();

  datauri.onerror = function() {
      Modernizr.addTest('datauri', function () { return false; });
  };  
  datauri.onload = function() {
      Modernizr.addTest('datauri', function () { return (datauri.width == 1 && datauri.height == 1); });
  };

  var base64str = "R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="
  while (base64str.length < 33000) {
    base64str = "\r\n" + base64str;
  }
  datauri.src= "data:image/gif;base64," + base64str;

})();

But I'm not sure what the prevailing wisdom is about what constitutes a 'pass' on this test.

@paulirish

This comment has been minimized.

Member

paulirish commented Jul 13, 2011

I would recommend doing something like...

(function(){


  var datauri = new Image();

  datauri.onerror = function() {
      Modernizr.datauri.over32kb = false;
  };  
  datauri.onload = function() {
      Modernizr.datauri = Boolean(true);
      Modernizr.datauri.over32kb = (datauri.width == 1 && datauri.height == 1);
  };

  if (!Modernizr.datauri) return datauri.onerror(); 

  var base64str = "R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="
  while (base64str.length < 33000) {
    base64str = "\r\n" + base64str;
  }
  datauri.src= "data:image/gif;base64," + base64str;

})();

so we'd keep the earlier test and just add a secondary aspect onto it.. yah?

@alastaircoote

This comment has been minimized.

alastaircoote commented Jul 15, 2011

Sounds good to me. I'd imagine the datauri stuff is still very relevant for icons, etc. that are under 32KB in size, so it would be great to keep both tests.

@stereobooster

This comment has been minimized.

Contributor

stereobooster commented Nov 19, 2011

Why do you want to use Boolean(true). {} is truthy anyway

@paulirish

This comment has been minimized.

Member

paulirish commented Nov 20, 2011

Because the former is also == true

@paulirish

This comment has been minimized.

Member

paulirish commented May 11, 2012

Hmm.. so @alastaircoote i'd love your help here.. I got this far, but in Chrome (at least), the onload/error handlers arent firing after i set the big img src in.

here's the new combo code:

// data uri test.
// github.com/Modernizr/Modernizr/issues/14

// This test is asynchronous. Watch out.


// in IE7 in HTTPS this can cause a Mixed Content security popup.
//   github.com/Modernizr/Modernizr/issues/362
// To avoid that you can create a new iframe and inject this.. perhaps..

(function(){

  var datauri = new Image();


  datauri.onerror = function() {
      Modernizr.addTest('datauri', false );
  };
  datauri.onload = function() {
      Modernizr.addTest('datauri', (datauri.width == 1 && datauri.height == 1));
      testOver32kb();
  };

  datauri.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";


  // once we have datauri, let's check to see if we have datauri over 32kb. IE8 doesn't.
  // github.com/Modernizr/Modernizr/issues/321
  // this is doubly asynchronous.
  function testOver32kb(){

    datauri.onerror = function() {
        Modernizr.datauri.over32kb = false;
    };
    datauri.onload = function() {
        Modernizr.datauri = Boolean(true);
        Modernizr.datauri.over32kb = (datauri.width == 1 && datauri.height == 1);
    };

    if (!Modernizr.datauri) return datauri.onerror();

    var base64str = "R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
    while (base64str.length < 33000) {
      base64str = "\r\n" + base64str;
    }
    datauri.src= "data:image/gif;base64," + base64str;
  }

})();


@sindresorhus

This comment has been minimized.

Contributor

sindresorhus commented Jan 24, 2013

@alastaircoote

This comment has been minimized.

alastaircoote commented Jan 24, 2013

Apologies for the extreme delay in replying to this- somehow I missed the previous notification, I think my GitHub notifications were set up wrong.

@paulirish, the problem appears to be reusing the datauri object. Creating a new Image object (datauriBig) appears to work:

// once we have datauri, let's check to see if we have datauri over 32kb. IE8 doesn't.
  // github.com/Modernizr/Modernizr/issues/321
  // this is doubly asynchronous.
  function testOver32kb(){

    var datauriBig = new Image();
    datauriBig.onerror = function() {
        Modernizr.datauri.over32kb = false;
    };
    datauriBig.onload = function() {
        Modernizr.datauri = Boolean(true);
        Modernizr.datauri.over32kb = (datauri.width == 1 && datauri.height == 1);
    };

    if (!Modernizr.datauri) return datauri.onerror();

    var base64str = "R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
    while (base64str.length < 33000) {
      base64str = "\r\n" + base64str;
    }
    datauriBig.src= "data:image/gif;base64," + base64str;
  }

stucox pushed a commit that referenced this issue Mar 24, 2013

Stu Cox
Merge pull request #876 from stucox/master
`datauri` test updates (fixes #321 & #362)

patrickkettner pushed a commit to patrickkettner/Modernizr that referenced this issue Feb 22, 2015

patrickkettner pushed a commit to patrickkettner/Modernizr that referenced this issue Feb 22, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment