Masked SVG flickering when changing currentColor

Question

To supplement my icon set, I'm using SVG's and currentColor. However, I'm seeing some issues with flickering when the (font)color changes or there's animation on the page.

Example of color change on hover causes flicker

body{
  color:green;
  font-size:50px;
}

.dynamicSVG {
    /*
        Allows us to colour SVGs using mask, the colour will follow the text colour
        NOTE: doesn't work well with SVG's with lots of colors as you lose the contrast
    */
    height: 1em;
    min-width: 1em;
    display: inline-block;
    -webkit-mask: var(--src) no-repeat 50% 50%;
    mask: var(--src) no-repeat 50% 50%;
    -webkit-mask-position: left;
    mask-position: left;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: currentColor;
    vertical-align: middle;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.dynamicSVG > img {
    /*
        Here I use an child img element inside the i.dynamicSVG.
        It uses the style SRC variable to remove the need to set the URL twice in HTML, a nice CSS hack.
        We do this to load in the image and ensure the dynamic SVG is the correct size and dimensions...
        Which it wouldn't have been as we're using background + mask for the dynamic icon
        It does mean the image will be called twice, but due to caching it shouldn't be an issue and isnt visible to the user
    */
    content: var(--src);
    height: 100%;
    visibility: hidden;
    /*Ensure the max height isn't overridden*/
    max-height: 100% !important;
    vertical-align:top;
}

.dynamicSVG:hover{
  color:red;
}

<div class="dynamicSVG" style="--src:url('http://upload.wikimedia.org/wikipedia/fr/c/c8/Twitter_Bird.svg')"><img /></div>
<span>< Hover Me</span>

I've read some articles which suggest -webkit-translate-3d, -webkit-backface-visibility,-webkit-transform-style, none of which resolves my issue.

Essentially I use a CSS mask to colorise the SVG to my font colour. The child img allows it to size correctly relative to the height. However, during transitions or in particular changing the font colour (and in turn the mask colour when using currentColor, the image is either hiding completely until the transition is complete or flickers.

The question is firstly, is there a better way of linking to an SVG (without embedding the XML) and using CSS to set the colour, or if there's no better solution, how can we stop the flickering / hiding during transitions.

I've mainly noticed it in chrome in my application, but in this example we can see it occur in modern edge too.