<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 - setting a property on CSSStyleDeclaration no longer sets the -webkit prefixed property automatically"

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

          </td>

        </tr>

        <tr>

          <th>Summary</th>

          <td>setting a property on CSSStyleDeclaration no longer sets the -webkit prefixed property automatically

          </td>

        </tr>

        <tr>

          <th>Classification</th>

          <td>Unclassified

          </td>

        </tr>

        <tr>

          <th>Product</th>

          <td>WebKit

          </td>

        </tr>

        <tr>

          <th>Version</th>

          <td>Safari Technology Preview

          </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>erwin.mombay&#64;gmail.com

          </td>

        </tr></table>

      <p>

        <div>

        <pre>When you have webkit prefixed css animations, you could previously overwrite it through `element.style.animation = 'none'`

and `element.style.webkitAnimation` would be set automatically. In Safari Technology preview it only sets the un-prefixed style

which causes the example below to never be visible. I'm guessing this is because <a class="bz_bug_link 

          bz_status_ASSIGNED "

   title="ASSIGNED - Implement CSS parsing for CSS animations unprefixed."

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

has not been implemented yet and work is in progress.

example:

&lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;head&gt;

  &lt;meta charset=&quot;utf-8&quot;&gt;

  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt;

  &lt;title&gt;JS Bin&lt;/title&gt;

    &lt;style&gt;

      body {

        -webkit-animation: -start 100s steps(1,end) 0s 1 normal both;

        animation: -start 100s steps(1,end) 0s 1 normal both;

      }

      &#64;-webkit-keyframes -start { 

        from {visibility:hidden} to {visibility:visible}

      }

      &#64;keyframes -start { 

        from {visibility:hidden} to {visibility:visible}

      }

    &lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;

  hello world

  &lt;script&gt;

    document.body.style.opacity = 1;

    document.body.style.visibility = 'visible';

    document.body.style.animation = 'none';

  &lt;/script&gt;

&lt;/body&gt;

&lt;/html&gt;</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>