<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - Similar SVGs drawn to a WebGL canvas are rendered incorrectly"
href="https://bugs.webkit.org/show_bug.cgi?id=158527">158527</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Similar SVGs drawn to a WebGL canvas are rendered incorrectly
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>WebKit Nightly Build
</td>
</tr>
<tr>
<th>Hardware</th>
<td>All
</td>
</tr>
<tr>
<th>OS</th>
<td>All
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>WebGL
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>gurmukhp@gmail.com
</td>
</tr>
<tr>
<th>CC</th>
<td>dino@apple.com
</td>
</tr></table>
<p>
<div>
<pre>Created <span class=""><a href="attachment.cgi?id=280806" name="attach_280806" title="Demo showing issue">attachment 280806</a> <a href="attachment.cgi?id=280806&action=edit" title="Demo showing issue">[details]</a></span>
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.</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>