CODEWITHSUNDEEP
ioscsssvgwkwebview
devios1
devios1

Reputation: 38025

Random glitchy rendering of SVG on iOS/WKWebView

We are experiencing a bizarre intermittent (very occasional) render glitch when displaying SVG icons in our iOS app based on WKWebView.

When it does happen, it seems to be possibly tied to CSS in that if I change some random (even completely unrelated) CSS classes in Safari while debugging the page, the glitching can go away or come back randomly. There seems to be no rhyme nor reason to it though, and we don't have any way to reliably reproduce it yet.

Just wondering if anyone has any thoughts or may have encountered this before.

enter image description here

As you can see there are a couple kinds of glitches: the obvious garbled icons, but also there is only supposed to be one Metrics tab. That part is especially strange because the "Metrics" label is just text, not even part of the icon!

If I debug the element, it looks as it should in the debugger. The element has the right background image url and the label is as it should be (I can even hover over the label in the elements tree and it will highlight the label on the page, even though the text is completely wrong). It seems to get completely screwed up in the actual rendering somehow.

Upvotes: 2

Views: 2125

Answers (1)

devios1
devios1

Reputation: 38025

So we ended up finally solving this and it turned out not to have anything to do with SVG after all. The culprit was actually the CSS greyscale filter that was being applied, probably in combination with something else we were doing.

In short, removing the greyscale filter fixed the glitchy rendering.

Upvotes: 5

Related Questions