Bug 158527 – Similar SVGs drawn to a WebGL canvas are rendered incorrectly

• Status: RESOLVED
• Resolution: CONFIGURATION CHANGED
• Component: WebGL

[Gurmukh Panesar]

Created attachment 280806 [details]
Demo showing issue

I've come across a bug whereby drawing very similar (but different) SVGs onto the Canvas using WebGL results in the SVGs being drawn on top of each other. An example is attached to better help understand the bug.

When the same application is run without using WebGL, everything works fine.

I know this app uses Pixi JS, but I've tried this on ThreeJS with the same problem. This occurs on iOS and Mac Safari, but is not an issue on Chrome (Blink).

Steps to Reproduce
- Load index.html on Chrome and Safari
- Inspect the last image and see that it's different.
- Loading via data URL or files makes absolutely no difference.

If the last SVG is left empty (everything inside the SVG element is deleted), Chrome doesn't render it (which is correct) but Safari does (which isn't).
If the height, width or viewport of any SVG is changed, then it will be rendered correctly. Adding ID's or other params to the SVG string make absolutely no difference.

[Gurmukh Panesar]

Created attachment 280892 [details]
Blink preview (correct)

[Gurmukh Panesar]

Created attachment 280893 [details]
WebKit Preview (incorrect)

[Alex Christensen]

I believe this is indeed incorrect, but your example doesn't draw anything in Firefox.  Could you please reduce your test case?  Right now all I can tell is that something is wrong in 29000 lines of code.

[Gurmukh Panesar]

Hi Alex,

How would you like me to reduce the test case? I am using a third party library to show an image in WebGL since it's not as easy as ctx.drawImage() like it is without WebGL.

I could go through and remove code in the Pixi.JS library but I'm not sure how this would help?

[Alex Christensen]

There is a very complicated set of SVG's, and a very complicated drawing path.  Ideally we would have something like "these two triangles should not be connected"

[Alex Christensen]

Also, your test case is large, and it could indicate a bug in Pixi JS.  I think it is indeed a bug in WebKit, but your demo doesn't show me this.

[Gurmukh Panesar]

I've simplified the sample. Now there are two very simple circles showing. One large red one and a smaller yellow one. No intersection or anything.

This works as expected in Firefox and Chrome but not in Safari/Webkit.

Do you know how I can simplify this example further? I was unable to find any code that easily draws an image to a canvas using WebGL.

Hopefully this will be simple enough?

[Gurmukh Panesar]

Created attachment 280934 [details]
Simplified Circle Demo (works in FF and Chrome)

[Gurmukh Panesar]

Created attachment 280936 [details]
Simple circle example displaying as expected on FF and Chrome

[Gurmukh Panesar]

Created attachment 280937 [details]
Simple circle example displaying incorrectly on WebKit

[Gurmukh Panesar]

Here's a bug raised for Chrome with this exact issue. It's got an example which is now fixed in Chrome but not Firefox. It's a very simple example. Hopefully the bug report will help you isolate the issue and fix it?

https://bugs.chromium.org/p/chromium/issues/detail?id=500180

Example: http://www.stagexl.org/temp/example18/example18.html

[Gurmukh Panesar]

Bug fix for Chrome here:
https://src.chromium.org/viewvc/blink?view=revision&revision=201929

[Marcin Ignac]

This is still happening in Version 11.1 (13605.1.33.1.2)

But seems to be fixed in Release 53 (Safari 11.2, WebKit 13606.1.11.2)?

Temporary workaround is to render SVG image to temp canvas and then use that temp canvas to upload to a texture.

[Kimmo Kinnunen]

works now