Firefox flickering when using CSS "filter: drop-shadow()"
This is the CSS:
.glow {
filter: drop-shadow(0px 0px 50px rgba(26, 100, 243, 0.25));
-webkit-filter: drop-shadow(0px 0px 50px rgba(26, 100, 243, 0.25));
transition: all 0.33s ease-in-out;
}
.glow:hover {
filter: drop-shadow(0px 0px 50px rgba(26, 100, 243, 0.75));
-webkit-filter: drop-shadow(0px 0px 50px rgba(26, 100, 243, 0.75));
}
GIF on how it looks like on Firefox (unexpected behavior) https://i.gyazo.com/4b74faab24bea75198a9c2323e2b0b2f.mp4
GIF on how it looks like on Chrome (expected behavior) https://i.gyazo.com/c4fff9b1e954723aca3230aae2579f02.mp4
It seems to work fine whenever the video above is not interacted with, in other words paused. If I hover my mouse over the video and play the video, it constantly flickers like shown above.
How can I fix this?
I've tried adding -webkit-filter but it doesn't seem to help.