From 9f7a248bd17320cf0ad53b35833938fa8e182b86 Mon Sep 17 00:00:00 2001 From: David Duarte Date: Wed, 3 Apr 2024 22:42:26 -0700 Subject: [PATCH] Force parsing the linked stylesheet before animation starts There is a chance for the animation to start before the polyfill parses the linked stylesheet because we download and parse it at the same time than the browser. When this happens, the ScrollTimeline is not created because the associated options are not available yet ( getAnimationTimelineOptions return null). To prevent this from happening we remove the href of the linked stylesheet to ensure that the polyfill will process the stylesheet before the browser. --- demo/scroll-timeline-external-css/index.html | 13 ++++++++ demo/scroll-timeline-external-css/styles.css | 33 ++++++++++++++++++++ index.html | 3 ++ src/scroll-timeline-css.js | 11 ++++++- 4 files changed, 59 insertions(+), 1 deletion(-) create mode 100644 demo/scroll-timeline-external-css/index.html create mode 100644 demo/scroll-timeline-external-css/styles.css diff --git a/demo/scroll-timeline-external-css/index.html b/demo/scroll-timeline-external-css/index.html new file mode 100644 index 0000000..a8bfdd8 --- /dev/null +++ b/demo/scroll-timeline-external-css/index.html @@ -0,0 +1,13 @@ + + + + + +
+
+
+
+
+
+ + diff --git a/demo/scroll-timeline-external-css/styles.css b/demo/scroll-timeline-external-css/styles.css new file mode 100644 index 0000000..6b1f2cc --- /dev/null +++ b/demo/scroll-timeline-external-css/styles.css @@ -0,0 +1,33 @@ +#container { + scroll-timeline-name: --foo, --bar; + overflow: scroll; + width: 500px; + height: 500px; + border: 1px solid #333; +} + +.spacer { + width: 100%; + height: 500px; +} + +#progress { + position: fixed; + height: 10px; + background-color: red; + animation: 1s progress linear forwards; + animation-timeline: --foo; +} + +body { + margin: 0px; +} + +@keyframes progress { + from { + width: 0px; + } + to { + width: 500px; + } +} \ No newline at end of file diff --git a/index.html b/index.html index 54985ea..44c169e 100644 --- a/index.html +++ b/index.html @@ -33,6 +33,9 @@
  • demo/view-timeline-external-css
    • +
  • + demo/scroll-timeline-external-css +
  • demo/basic/anonymous-scroll-timeline.html
    • diff --git a/src/scroll-timeline-css.js b/src/scroll-timeline-css.js index 5d3d0b0..25a3113 100644 --- a/src/scroll-timeline-css.js +++ b/src/scroll-timeline-css.js @@ -53,7 +53,14 @@ function initMutationObserver() { // Most likely we won't be able to fetch resources from other origins. return; } - fetch(linkElement.getAttribute('href')).then(async (response) => { + + // Stop loading the stylesheet to ensure that we finished parsing it before it's + // loaded by the browser (and that animations are only started after + // we collected the required options) + const href = linkElement.getAttribute('href') + linkElement.removeAttribute('href') + + fetch(href).then(async (response) => { const result = await response.text(); let newSrc = parser.transpileStyleSheet(result, true); newSrc = parser.transpileStyleSheet(result, false); @@ -61,6 +68,8 @@ function initMutationObserver() { const blob = new Blob([newSrc], { type: 'text/css' }); const url = URL.createObjectURL(blob); linkElement.setAttribute('href', url); + } else { + linkElement.setAttribute('href', href); } }); }