SVG Animation within mask glitch in firefox - animation

Question

I'm trying to animate the filling of a blood drop, with svg for the first time :
Animated drop
The animations runs fine on most navigators (with a static fallback on IE11 which doesn't support SVG animation), but Firefox displays some bad glitches on the mask. The bug is visible with the last version of Firefox on Windows, though there's no problems on the Mac version.
You can see a screenshot of the glitch here :
Firefox Glitch
The "wave" is a rectangle with a fill pattern and an horizontal repeating animation, within 2 nested , the first being the mask, the second one the vertical animation.
.vagueContainer-5 {
-moz-animation: fillup-5 10s 1 ease-out forwards;
-webkit-animation: fillup-5 10s 1 ease-out forwards;
animation: fillup-5 10s 1 ease-out forwards;
}
#keyframes fillup-5 {
0% { transform: translateY(470px); }
100% { transform: translateY(224px); }
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 540 528">
<defs>
<pattern id="water" width=".25" height="1.1">
<path fill="#E20020" d="M300 740V0c-75 0-75 14.4-150 14.4S75 0 0 0v740h300z"></path>
</pattern>
<path id="drop" fill="#FFF" d="M388.9 417.6c-33.3 33.3-79.8 49.1-119.7 49.1s-85.4-15.8-118.8-49.1-45.1-69.7-45.1-104.7 14.5-78 31.1-101.2c16.6-23.3 64-78 93.3-116.6s39.9-67.2 39.9-67.2S283 57 312.3 95.6s67.7 83.8 90.5 116.2C419.4 235.1 434 277.9 434 313s-11.8 71.3-45.1 104.6z"/>
<mask id="drop_mask">
<use xlink:href="#drop"/>
</mask>
</defs>
<g mask="url(#drop_mask)" class="vagueMask">
<g class="vagueContainer vagueContainer-5" transform="translate(0, 224)">
<path class="vague vague-5" fill="url(#water)" d="M0 0h1200v740H0z"></path>
</g>
</g>
</svg>
Any idea how I could resolve that, or should I set a static fallback ?
P.S. : It's my first time here, please tell me if I should include other elements ! Thanks in advance.

Answer 1

I had a more precise look at the <g> element and seem to have found a workaround : instead of <g> as a mask, I referenced the contents inside within <defs> and applied the mask on a <use> tag.
$(document).ready(function(){
var vagueContainer= SVG.get('vagueContainer');
var vague= SVG.get('vague');
vagueContainer.move(0, 470);
var fromTop=444-niveau*44;
vague.move(-600, 0);
vagueContainer.animate('10s','>','1s').move(0, fromTop);
vague.animate('1s','-','1s').move(0, 0).after(function(){
vague.move(-600, 0);
vague.animate('1.5s').move(0, 0).after(function(){
vague.move(-600, 0);
vague.animate('2s').move(0, 0).after(function(){
vague.move(-600, 0);
vague.animate('2.5s').move(0, 0).after(function(){
vague.move(-600, 0);
vague.animate('3s').move(0, 0).after(function(){
vague.move(-600, 0);
vague.animate('3.5s').move(0, 0).loop();
});
});
});
});
});
});
#vagueMask{
visibility: hidden;
-moz-animation: show 1s 1 forwards;
-webkit-animation: show 1s 1 forwards;
animation: show 1s 1 forwards;
}
#keyframes show{
100% {
visibility:visible;
}
}
<defs>
<g id="vagueContainer" x="0" y="0" transform ="matrix(1,0,0,1,0,<?php echo $transform; ?>)">
<rect id="vague" x="-600" y="0" fill="url(#water)" width="1200" height="740"/>
</g>
</defs>
<use mask="url(#drop_mask)" class="vagueMask" xlink:href="#vagueContainer" x="0" y="0" width="329" height="439"></use>
I also got this element to appear for positions reasons (the element is already placed at the right level if there is no .js but otherwise goes down for the filling up animation) : I had to use "visibility", because "opacity" caused the same bug.
Animation working fine on Firefox
Seems to work but I'm still not really sure why...