Mask doesn't work in Safari with client side rendering
HapLifeMan opened this issue · comments
Hello,
I noticed today an issue with masks/gradients/idk on Safari with client side rendering.
I want to precise that I am using Nuxt with both client and server side rendering.
Expectations
On Chrome, Firefox and Safari-(SSR-only), this is working fine:
Reality
But with client side rendering on Safari, I am switching to another page and go back to the previous, this is what I got and I don't understand what happened:
Comments
I don't know if it's a bug related to the library or not.
There's no error or warning in the console.
I found something that can be related, without success: https://fvsch.com/svg-gradient-fill/.
Can you help in that way? Thanks!
The image preview plugin generates an SVG element (when the file first loads) and adds it to the body, maybe it's removed on page switch?
I just verified and SVG elements are present and exactly the same for both client and server side rendering.
Okay, thanks! Can I test this publicly somewhere, I haven't been able to reproduce it locally.
Should be fixed with latest version of the plugin, please confirm.
It's working now @rikschennink, sorry for the delay! Thank you very much!
EDIT: I just noticed that the mask has this problem in Chrome/Safari now, I don't know how it is triggered because it's random 🤔
When I am resizing the window, the preview image is fading to black background until I stop resizing.
It does this to improve resizing performance. I’m still fine tuning to make it only do this if absolutely necessary.
I’ll close the issue as the original problem has been resolved.