iOS/WKWebView上SVG的随机小故障渲染 [英] Random glitchy rendering of SVG on iOS/WKWebView
问题描述
在基于WKWebView的iOS应用中显示SVG图标时，我们遇到了一种奇怪的间歇性(偶尔)渲染故障.
We are experiencing a bizarre intermittent (very occasional) render glitch when displaying SVG icons in our iOS app based on WKWebView.
当它确实发生时，似乎可能与CSS有关，因为如果我在调试页面时在Safari中更改了一些随机的(甚至是完全不相关的)CSS类，则故障可能会消失或随机返回.似乎没有韵律也没有理由，而且我们还没有任何方法可以可靠地复制它.
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.
您可以看到有两种故障:明显的乱码图标，但也应该只有一个 指标标签.这部分特别奇怪，因为度量"标签只是文本，甚至不是图标的一部分！
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!
如果我调试该元素，则它在调试器中的外观应与它相同.元素具有正确的背景图片url和标签应有的标签(我甚至可以将鼠标悬停在元素树中的标签上，并且即使文本完全错误，它也会在页面上突出显示标签).似乎以某种方式完全搞砸了实际的渲染.
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.
推荐答案
所以我们最终解决了这个问题，结果证明与SVG根本没有任何关系.罪魁祸首实际上是正在应用的CSS灰度过滤器，可能与我们正在做的其他事情结合在一起.
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.
这篇关于iOS/WKWebView上SVG的随机小故障渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
