I've got a problem with zooming into a masked element.
You can take a look at my jsfiddle example: https://jsfiddle.net/1a7nb5my/9/ (you can see it lagging on the top left corner). This works fine in Safari, Chrome etc, but not in Firefox.
This is what I'm doing:
.test
{
-webkit-mask-size: 100% 100%;
}
.test.active
{
-webkit-mask-size: 100000px 100000px;
}
Firefox starts lagging once the mask gets too large. This also slows down the rest of my page as it happens, so even if it doesn't look too bad in this example, it's kind of a big problem for me.
I can't come up with any other solution to this problem other than increasing the mask size, so if anyone has other ideas on how to solve this problem I'd be happy to try them.
Solutions on how to fix the lagging in Firefox are also appreciated.
Thank you for any hint and help in advance.
Edit:
I found a workaround, which does not lag: https://jsfiddle.net/5sv7j1ck/7/
Using scale on the mask and inverting the scale on the background, is possible but you can see the mask getting pixelated although it's an SVG.