Hello,
I'm trying to make my images appear better when they load in, so I put a placeholder image, but the placeholder disappears when the high quality one starts loading in on firefox but not on edge.

<Image
    className='
        w-full
        max-w-prose
        aspect-square
        rounded-2xl
    '
    src={Selfie}
    alt='Portrait of a young man wearing a student cap and a black suit with a red tie.'
    width={562}
    height={562}
    blurDataURL=' data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAPNQTFRFW0keFREFJR4JSUMtDgwEEQ8EEw4ECgcCCQcCEQ4EWUkfOzIYIR4TCAcDCwgDCwcDBwYCCgcDDwsEUUIcGBQFVUwrCgkDBwUBCggDDQkERDgYGxUFW1IyCAYCCwkDDwwDDgkENy4SIhsITEUsDAkDEg8FNCwQGBQJDAkEDgkDLiUNKCEMPjcgDQsDCAcCGBUGST8cGRQKDQkFKSEKKSIOVkcgDgsDJCAKT0MfGRUKKSAJIxwLY1EfGhUIKCMKT0IeHhkLKiEIFhEFZ1YlNzAYDQoDKCIKTD8bLycQDQgDKiEGbWE4PzkjJSAISTwXRjkXDQgEswbEGAAAAHZJREFUeJxjYGBkYmZhZWPn4GTgYuTm4eXjFxAUYhAWERUT4BMXkJBkkJKWkZCVk5fgU2BQVFJW4VVVU9fQZNDS1tHV0zcwNNJkMDYxNZMwt7CU1GSwsraxlbOzd9BQYHB0cnZxdXP30PBk8HL19pHz9fPnCwAALcMOpQsiKTMAAAAASUVORK5CYII='
    placeholder='blur'
/>

When I add a mask to the image, the placeholder disappears in Firefox as well.

img.blob {
    -webkit-mask-image: url('../public/img/blob.svg');
            mask-image: url('../public/img/blob.svg');
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
}

What can I do to fix this?