Bug 158527 - Similar SVGs drawn to a WebGL canvas are rendered incorrectly
Summary: Similar SVGs drawn to a WebGL canvas are rendered incorrectly
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: WebGL (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2016-06-08 08:37 PDT by Gurmukh Panesar
Modified: 2018-04-11 04:46 PDT (History)
5 users (show)

See Also:


Attachments
Demo showing issue (380.22 KB, application/zip)
2016-06-08 08:37 PDT, Gurmukh Panesar
no flags Details
Blink preview (correct) (140.30 KB, image/png)
2016-06-09 00:34 PDT, Gurmukh Panesar
no flags Details
WebKit Preview (incorrect) (160.91 KB, image/png)
2016-06-09 00:34 PDT, Gurmukh Panesar
no flags Details
Simplified Circle Demo (works in FF and Chrome) (295.46 KB, application/zip)
2016-06-09 13:04 PDT, Gurmukh Panesar
no flags Details
Simple circle example displaying as expected on FF and Chrome (7.12 KB, image/png)
2016-06-09 13:04 PDT, Gurmukh Panesar
no flags Details
Simple circle example displaying incorrectly on WebKit (8.04 KB, image/png)
2016-06-09 13:05 PDT, Gurmukh Panesar
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Gurmukh Panesar 2016-06-08 08:37:04 PDT
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.
Comment 1 Gurmukh Panesar 2016-06-09 00:34:29 PDT
Created attachment 280892 [details]
Blink preview (correct)
Comment 2 Gurmukh Panesar 2016-06-09 00:34:50 PDT
Created attachment 280893 [details]
WebKit Preview (incorrect)
Comment 3 Alex Christensen 2016-06-09 11:29:45 PDT
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.
Comment 4 Gurmukh Panesar 2016-06-09 11:50:34 PDT
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?
Comment 5 Alex Christensen 2016-06-09 12:09:56 PDT
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"
Comment 6 Alex Christensen 2016-06-09 12:11:20 PDT
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.
Comment 7 Gurmukh Panesar 2016-06-09 13:03:27 PDT
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?
Comment 8 Gurmukh Panesar 2016-06-09 13:04:04 PDT
Created attachment 280934 [details]
Simplified Circle Demo (works in FF and Chrome)
Comment 9 Gurmukh Panesar 2016-06-09 13:04:43 PDT
Created attachment 280936 [details]
Simple circle example displaying as expected on FF and Chrome
Comment 10 Gurmukh Panesar 2016-06-09 13:05:09 PDT
Created attachment 280937 [details]
Simple circle example displaying incorrectly on WebKit
Comment 11 Gurmukh Panesar 2016-06-11 04:38:55 PDT
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
Comment 12 Gurmukh Panesar 2016-06-11 04:41:51 PDT
Bug fix for Chrome here:
https://src.chromium.org/viewvc/blink?view=revision&revision=201929
Comment 13 Marcin Ignac 2018-04-11 04:46:04 PDT
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.