Inkonsistentes Verhalten

[swissniggi]

var image = new Image();
image.src = 'data:image/png;base64,' + logo;
image.setAttribute('id', 'logo');
image.setAttribute('style', 'display: none');
document.body.appendChild(image);

// Generate the QR Code.
$('#qrcodeDIV').qrcode({
    foreground: '#00000',
    background: '#fffff',
    width: 302,
    height: 302,
    text: "exampleValue",
    typeNumber: -1,
    errorCorrectLevel: 'M',
    mode: 4,
    image: $('#logo')[0]
});

Ich verwende den oben stehenden Code in einer FileMaker-Anwendung. "logo" (Zeile 3) ist ein Base64-String eines png-Bilds. Auf Windows verwendet FileMaker eine IE11-Engine. Dort funktioniert der Code ohne Probleme. Auf MacOSX wird eine Safari-Engine verwendet. Dort erhalte ich einen QR-Code ohne Logo. Nun habe ich den Code in eine HTML-Datei exportiert und verwende im image als 'src' einen Dateipfad (siehe hier: https://github.com/swissniggi/qrcode-test). Nun habe ich ein merkwürdiges Verhalten:

Wenn ich den Original-Code verwende (siehe testImage_ES6.html aus meinem Repository) funktioniert es in keinem Browser. IE11 uterstützt kein ES6 und in Firefox/Edge/Safari erhalte ich die Meldung:"Uncaught TypeError: $(...).qrcode is not a function".

Wenn ich den konvertierten Code verwende (siehe testImage_ES5.html aus meinem Repository) funktioniert es im IE11 einwandfrei. In Edge erhalte ich immer einen QR-Code ohne Logo. Im Firefox funktioniert es nur, wenn ich den Pfad zur HTML-Datei in die Adresszeile einfüge und Enter drücke. Wenn ich die Datei durch Doppelclick öffne oder die Seite neu lade erhalte ich ebenfalls einen QR-Code ohne logo. Im Safari stelle ich das gleiche Verhalten fest.

PS: Das Dateiformat des Bildes hat auf das Verhalten keinen Einfluss.