diff --git a/src/utils/FontManager.js b/src/utils/FontManager.js index c7a1f5e0b6..b9e33c2c4e 100644 --- a/src/utils/FontManager.js +++ b/src/utils/FontManager.js @@ -22,6 +22,7 @@ limitations under the License. */ function safariVersionCheck(ua) { + console.log("Browser is Safari - checking version for COLR support"); try { const safariVersionMatch = ua.match(/Mac OS X ([\d|_]+).*Version\/([\d|.]+).*Safari/); if (safariVersionMatch) { @@ -31,7 +32,7 @@ function safariVersionCheck(ua) { const safariVersion = safariVersionStr.split(".").map(n => parseInt(n, 10)); const colrFontSupported = macOSVersion[0] >= 10 && macOSVersion[1] >= 14 && safariVersion[0] >= 12; // https://www.colorfonts.wtf/ states safari supports COLR fonts from this version on - console.log(`Browser is Safari - requiring macOS 10.14 and Safari 12, ` + + console.log(`COLR support on Safari requires macOS 10.14 and Safari 12, ` + `detected Safari ${safariVersionStr} on macOS ${macOSVersionStr}, ` + `COLR supported: ${colrFontSupported}`); return colrFontSupported; @@ -45,19 +46,21 @@ function safariVersionCheck(ua) { async function isColrFontSupported() { console.log("Checking for COLR support"); + const {userAgent} = navigator; // Firefox has supported COLR fonts since version 26 // but doesn't support the check below without // "Extract canvas data" permissions // when content blocking is enabled. - if (navigator.userAgent.includes("Firefox")) { + if (userAgent.includes("Firefox")) { console.log("Browser is Firefox - assuming COLR is supported"); return true; } // Safari doesn't wait for the font to load (if it doesn't have it in cache) // to emit the load event on the image, so there is no way to not make the check // reliable. Instead sniff the version. - if (navigator.userAgent.includes("Safari")) { - return safariVersionCheck(navigator.userAgent); + // Excluding "Chrome", as it's user agent unhelpfully also contains Safari... + if (!userAgent.includes("Chrome") && userAgent.includes("Safari")) { + return safariVersionCheck(userAgent); } try {