Modernizr check for object snap, not giving the expected result

Question

I am backing up for object-fit using Modernizr. The solution works, but instead of applying it only to browsers that don't support object-fit (like IE), it applies the code to all browsers. Why is this?

My code is:

 if ( ! Modernizr.objectfit ) { console.log('object fit is not supported'); tpj('.featuredpost').each(function () { var $container = tpj(this), imgUrl = $container.find('.img-responsive').prop('src'); if (imgUrl) { $container .css('backgroundImage', 'url(' + imgUrl + ')') .addClass('compat-object-fit'); } }); tpj('.big-post').each(function () { var $container = tpj(this), imgUrl = $container.find('.img-responsive').prop('src'); if (imgUrl) { $container .css('backgroundImage', 'url(' + imgUrl + ')') .addClass('compat-object-fit'); } }); }else{ console.log('object is supported'); } 

No matter which browser I check, it always registers: object fit is not supported even in browsers that support object-fit .

What can i do with this?

Modernizr is properly enabled and uploaded (even if I change the local file to the CDN path, I get the same result):

 <!-- Modernizr Library --> <script type="text/javascript" src="js/modernizr.min.js"></script> 

Answer 1

You must use the old version of Modernizr. Make sure you are using the full version of Modernizr 3.x or the custom version of Modernizr 3.x with CSS Object Fit validation.

See the example with the custom version of Modernizr on Codepen