ampproject · kristoferbaxter · Aug 10, 2020 · Aug 10, 2020 · Aug 10, 2020
diff --git a/build-system/compile/bundles.config.js b/build-system/compile/bundles.config.js
@@ -337,12 +337,6 @@ exports.extensionBundles = [
     latestVersion: '0.1',
     type: TYPES.MISC,
   },
-  {
-    name: 'amp-animation-polyfill',
-    version: '0.1',
-    latestVersion: '0.1',
-    type: TYPES.MISC,
-  },
   {
     name: 'amp-apester-media',
     version: '0.1',

diff --git a/build-system/tasks/presubmit-checks.js b/build-system/tasks/presubmit-checks.js
@@ -1064,7 +1064,6 @@ const forbiddenTermsSrcInclusive = {
       'extensions/amp-ad-network-adsense-impl/0.1/amp-ad-network-adsense-impl.js', // eslint-disable-line max-len
       'extensions/amp-ad-network-doubleclick-impl/0.1/amp-ad-network-doubleclick-impl.js', // eslint-disable-line max-len
       'extensions/amp-lightbox-gallery/0.1/amp-lightbox-gallery.js',
-      'extensions/amp-animation/0.1/install-polyfill.js',
     ],
   },
   'loadElementClass': {

diff --git a/extensions/amp-animation-polyfill/0.1/amp-animation-polyfill.js b/extensions/amp-animation-polyfill/0.1/amp-animation-polyfill.js
diff --git a/extensions/amp-animation-polyfill/OWNERS b/extensions/amp-animation-polyfill/OWNERS
diff --git a/extensions/amp-animation/0.1/amp-animation.js b/extensions/amp-animation/0.1/amp-animation.js
@@ -26,7 +26,7 @@ import {getChildJsonConfig} from '../../../src/json';
 import {getDetail, listen} from '../../../src/event-helper';
 import {getFriendlyIframeEmbedOptional} from '../../../src/iframe-helper';
 import {getParentWindowFrameElement} from '../../../src/service';
-import {installWebAnimationsIfNecessary} from './install-polyfill';
+import {installWebAnimationsIfNecessary} from './web-animations-polyfill';
 import {isFiniteNumber} from '../../../src/types';
 import {setInitialDisplay, setStyles, toggle} from '../../../src/style';
 
@@ -479,14 +479,15 @@ export class AmpAnimation extends AMP.BaseElement {
       null);
 
     // Ensure polyfill is installed.
-    const polyfillPromise = installWebAnimationsIfNecessary(this.win);
+    installWebAnimationsIfNecessary(this.win);
+
     const ampdoc = this.getAmpDoc();
     const readyPromise = this.embed_
       ? this.embed_.whenReady()
       : ampdoc.whenReady();
     const hostWin = this.embed_ ? this.embed_.win : this.win;
     const baseUrl = this.embed_ ? this.embed_.getUrl() : ampdoc.getUrl();
-    return Promise.all([polyfillPromise, readyPromise]).then(() => {
+    return readyPromise.then(() => {
       const builder = new Builder(
         hostWin,
         this.getRootNode_(),

diff --git a/extensions/amp-animation/0.1/install-polyfill.js b/extensions/amp-animation/0.1/install-polyfill.js
diff --git a/extensions/amp-animation/0.1/web-animation-service.js b/extensions/amp-animation/0.1/web-animation-service.js
@@ -16,7 +16,7 @@
 import {Builder} from './web-animations';
 import {Services} from '../../../src/services';
 import {WebAnimationBuilderOptionsDef} from './web-animation-types';
-import {installWebAnimationsIfNecessary} from './install-polyfill';
+import {installWebAnimationsIfNecessary} from './web-animations-polyfill';
 
 export class WebAnimationService {
   /**
@@ -35,19 +35,18 @@ export class WebAnimationService {
 
   /**
    * @param {!WebAnimationBuilderOptionsDef} options
-   * @return {!Promise<Builder>}
+   * @return {!Builder}
    */
   createBuilder(options) {
-    return installWebAnimationsIfNecessary(this.ampdoc_.win).then(
-      () =>
-        new Builder(
-          this.ampdoc_.win,
-          this.ampdoc_.getRootNode(),
-          this.ampdoc_.getUrl(),
-          this.vsync_,
-          this.owners_,
-          options
-        )
+    installWebAnimationsIfNecessary(this.ampdoc_.win);
+
+    return new Builder(
+      this.ampdoc_.win,
+      this.ampdoc_.getRootNode(),
+      this.ampdoc_.getUrl(),
+      this.vsync_,
+      this.owners_,
+      options
     );
   }
 }
diff --git a/extensions/amp-animation/0.1/web-animations-polyfill.js b/extensions/amp-animation/0.1/web-animations-polyfill.js
@@ -0,0 +1,44 @@
+/**
+ * Copyright 2016 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {Services} from '../../../src/services';
+import {installWebAnimations} from 'web-animations-js/web-animations.install';
+
+const POLYFILLED = '__AMP_WA';
+
+/**
+ * Force Web Animations polyfill on Safari.
+ * Native Web Animations on WebKit do not respect easing for individual
+ * keyframes and break overall timing. See https://go.amp.dev/issue/27762 and
+ * https://bugs.webkit.org/show_bug.cgi?id=210526
+ * @param {!Window} win
+ */
+function forceOnSafari(win) {
+  if (Services.platformFor(win).isSafari()) {
+    // Using string access syntax to bypass typecheck.
+    win.Element.prototype['animate'] = null;
+  }
+}
+
+/**
+ * @param {!Window} win
+ */
+export function installWebAnimationsIfNecessary(win) {
+  if (!win[POLYFILLED]) {
+    forceOnSafari(win);
+    win[POLYFILLED] = true;
+    installWebAnimations(win);
+  }
+}