<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 - Custom cursor with shadow not rendered"

   href="https://bugs.webkit.org/show_bug.cgi?id=168651">168651</a>

          </td>

        </tr>

        <tr>

          <th>Summary</th>

          <td>Custom cursor with shadow not rendered

          </td>

        </tr>

        <tr>

          <th>Classification</th>

          <td>Unclassified

          </td>

        </tr>

        <tr>

          <th>Product</th>

          <td>WebKit

          </td>

        </tr>

        <tr>

          <th>Version</th>

          <td>Safari 10

          </td>

        </tr>

        <tr>

          <th>Hardware</th>

          <td>Unspecified

          </td>

        </tr>

        <tr>

          <th>OS</th>

          <td>Unspecified

          </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>CSS

          </td>

        </tr>

        <tr>

          <th>Assignee</th>

          <td>webkit-unassigned&#64;lists.webkit.org

          </td>

        </tr>

        <tr>

          <th>Reporter</th>

          <td>gunnar&#64;bittersmann.de

          </td>

        </tr></table>

      <p>

        <div>

        <pre>I’ve created a custom cursor:

&lt;svg xmlns=&quot;<a href="http://www.w3.org/2000/svg">http://www.w3.org/2000/svg</a>&quot; viewBox=&quot;-6 -4 12 10&quot; width=&quot;24px&quot; height=&quot;16px&quot; filter=&quot;drop-shadow(0px 2px 1px #666)&quot;&gt;

    &lt;g id=&quot;border&quot; fill=&quot;white&quot;&gt;

        &lt;circle cx=&quot;0&quot; cy=&quot;0&quot; r=&quot;1.707&quot;/&gt;

        &lt;polygon points=&quot;-6 0, -1.293 -3.707, -1.293 3.707&quot;/&gt;

        &lt;polygon points=&quot;6 0, 1.293 -3.707, 1.293 3.707&quot;/&gt;

    &lt;/g&gt;

    &lt;g fill=&quot;black&quot;&gt;

        &lt;circle cx=&quot;0&quot; cy=&quot;0&quot; r=&quot;1&quot;/&gt;

        &lt;polygon points=&quot;-4.667 0, -2 -2, -2 2&quot;/&gt;

        &lt;polygon points=&quot;4.667 0, 2 -2, 2 2&quot;/&gt;

    &lt;/g&gt;

&lt;/svg&gt;

and used it in the stylesheet:

    cursor: url('/calendar/styles/ew-scroll.svg') 12 8, all-scroll;

The cursor shows up in Chrome (blurred on Retina displays, but that’s another bug), but no cursor is rendered in Safari, i.e. neither the custom cursor nor the default all-scroll cursor.

When removing the filter attribut, the cursor is visible in Safari.

The behavior is the same when filter is not set via attribute but as a CSS rule in a style element.</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>