Search code examples
htmlcsssafarimodernizr

Modernizr randomly not testing image formats in Safari

For unknown reasons, my modernizr does not work as expected in Safari on a seemingly random basis.

My modernizr build

In short, I mainly check for image formats (Webp, Jpeg2000 and JpegXR) and in Chrome, Edge and Mozilla it works just fine, my problem is Safari, tested on an IPad.

=> I intend to serve images depending on compatibility

html.webp.no-jpeg2000 {/** webp */}
html.jpeg-2000 {/** j2k */}
html.no-webp.no-jpeg2000 {/** fallback */}

I've build myself a little script to "var_dump" my HTML classes:

$(document).ready(function() {
  var response = $("html").attr("class");
  $("<p>" + response + "</p>").appendTo("#header-nav");
})

In Chrome my classes are as expected:

svg xhrresponsetype atobbtoa atob-btoa canvas preserve3d placeholder xhrresponsetypejson xhrresponsetypetext svgclippaths svgasimg cssanimations webgl webpalpha webpanimation webplossless webp no-jpeg2000 no-jpegxr webp-alpha webp-animation webp-lossless

In Safari the classes are as follows:

svg xhrresponsetype atobbtoa atob-btoa canvas preserve3d placeholder xhrresponsetypejson xhrresponsetypetext svgclippaths svgasimg cssanimations webgl

At first glance, they are identical, and that's true until the class WebGL. After this class (test), it just stops. Sometimes I do get all image related classes, but most of the time I get none, and then sometimes only one or two are working.

I tried

Adding a second modernizr image only build and putting it on the very top of the header. Seems to give more consistently positive results.

What can be the cause of this problem, or am I doing something wrong?

Solution

  • I got it solved, kinda at least.

    The problem was that I put a defer on my modernizr. Yeah, no comment pls....

    Still, my script does output the same classes, why that's happening - I do not know, but the classes are definitely added.