2

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.

devios1
  • 36,899
  • 45
  • 162
  • 260
  • Would be great if you could provide a test project with just the web view and its contents. It would also help isolate the problem and eliminate outside code as a cause – inorganik Oct 18 '17 at 15:40
  • @inorganik unfortunately it would take great effort to strip this out into a standalone app, however if it comes to that I will consider it. – devios1 Oct 18 '17 at 20:03

1 Answers1

5

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.

devios1
  • 36,899
  • 45
  • 162
  • 260
  • 2
    I was having similar issues with that weird tearing and corruption effect, and it seems that the work around described [here](https://stackoverflow.com/a/37581308/1072621) was the culprit, namely setting filters on elements that wrapped the SVGs, so it would seem this issue isn't specific to the greyscale filter but filters in general. – James Pizzurro May 04 '18 at 23:31