SVG scroll performance with filter

ionic-v1
1

I recently discovered that an SVG filter was really hurting that view’s scroll performance. Scroll was choppy and very delayed.

As demonstrated in this CodePen, I am using an SVG <symbol> sprite with <use> declarations. The phone icon has a drop shadow and inset shadow. Because CSS’s filter: drop-shadow(...) doesn’t support inset shadows, I had to use a filter defined in a defs tag in addition to the CSS filter.

My CSS was:

.icon {
    filter: url(#inset-shadow) drop-shadow(0 1px 0 rgba(#14a0ff, 0.1));
}

To make the view scroll as it should, I had to remove the inset shadow, so:

.icon {
    filter: drop-shadow(0 1px 0 rgba(#14a0ff, 0.1));
}
.no-ionic .icon {
    filter: url(#inset-shadow) drop-shadow(0 1px 0 rgba(#14a0ff, 0.1));
}

Are there known issues with SVG filters in Cordova or Ionic? It’s just an inset shadow, so not the end of the world by removing it, but those details make me happy. Thanks! -Matt