Black Texture only in safari

Questions
,
1

I am trying to create a texture using a canvas texture, but the texture appears black in Safari while it works fine on Windows. Below is the code I am currently using:

export function svgToTexture(svgString, targetHeight) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        const svgBlob = new Blob([svgString], { type: 'image/svg+xml' });
        const url = URL.createObjectURL(svgBlob);
        img.onload = () => {
            let aspectRatio = img.width / img.height;
            let targetWidth = targetHeight * aspectRatio;

            const MAX_TEXTURE_SIZE = 1024;
            if (
                targetWidth > MAX_TEXTURE_SIZE ||
                targetHeight > MAX_TEXTURE_SIZE
            ) {
                const scale =
                    MAX_TEXTURE_SIZE / Math.max(targetWidth, targetHeight);
                targetWidth *= scale;
                targetHeight *= scale;
            }

            const canvas = document.createElement('canvas');
            canvas.width = targetWidth;
            canvas.height = targetHeight;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, targetWidth, targetHeight);

            const texture = new THREE.CanvasTexture(canvas);
            resolve(texture);
            URL.revokeObjectURL(url);
        };

        img.onerror = (err) => {
            console.error('Failed to load SVG string as image', err);
            URL.revokeObjectURL(url);
            reject(err);
        };

        img.src = url;
    });
}

Screenshot 2025-06-03 at 5.16.02 PM
Screenshot 2025-06-03 at 5.16.02 PM1220×820 98.1 KB

2

What’s the Safari version?

It’s possibly a bug in the browsers, and might be worth a report. But I see a similar thread from the babylon.js forums, you might find some options there — Drawing SVG content (text) into DynamicTexture doesn't work in Safari < v15 - Bugs - Babylon.js

3

The safari version I am using right now is 18.3.8, maybe that helps not sure, as I am facing the same issue on iPhone (both Safari and Chrome)

4

What are the resulting values of targetWidth and targetHeight? Eg…

img.onload = () => {
            let aspectRatio = img.width / img.height;
            let targetWidth = targetHeight * aspectRatio;

            const MAX_TEXTURE_SIZE = 1024;
            if (
                targetWidth > MAX_TEXTURE_SIZE ||
                targetHeight > MAX_TEXTURE_SIZE
            ) {
                const scale =
                    MAX_TEXTURE_SIZE / Math.max(targetWidth, targetHeight);
                targetWidth *= scale;
                targetHeight *= scale;
            }

            console.log(targetWidth) //here
            console.log(targetHeight) //and here

And does the image show on the canvas if you append the canvas to the document body?

5

The targetHeight is 500, and the targetWidth is calculated

let aspectRatio = img.width / img.height;
let targetWidth = targetHeight * aspectRatio;

What I have noticed is that sometime a PNG image made with canvas on an iOS device is blank for some reason,
Currently, I am using a workaround in which I am changing the height and width of svgString to my new resize value and using it as a texture, but still curious why resizing the image with ctx.drawImage is not working sometimes in iOS