Skip to content

Using Modernizr to detect webp support breaks pinning #42

@kmh3785

Description

@kmh3785

When working properly, a pinned div would look something like:

Today, I was experimenting with webp images and using Modernizr to switch out between standard images/webp based on browser functionality, and found that it broke the pinning functionality - the same div now looks like:

This is the bit of script being used to switch images out

Modernizr.on('webp', function (result) {
// result == Modernizr.webp
console.log(result); // either true or false
if (result) {
// WebP Support
$(".webpImage").queue(function() {
var webp = $(this).attr('data-webp');
$(this).attr('src', webp)
})
}
else {
// No WebP support
$(".webpImage").queue(function() {
var nowebp = $(this).attr('data-img-fallback');
$(this).attr('src', nowebp)
})
}
});

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions