Polyfill should co-exist better with native implementation

[majido]

Here are a few improvements to current polyfill that would make it work better in presence of native implementation.

Polyfill should not install if there is native implementation

Currently polyfill install itself unconditionally. As more browsers implement the API, it should take advantage of the native implementation it if exists. For example majority of the API is implemented on Chrome Canary when web platform experimental flags are used.

Option to Force

It will also be nice to still have the option (not default) of force installing the polyfill to replace the native implementation even if it exists. This can be useful to create demos where we compare the polyfill/native implementation behavior in the same browser.

Detecting sub features

While Chrome implements most of the features of Scroll Timeline but it does not yet support all of them. For example:

• timeRange: auto is not implemented (Chrome issue)
• element-based offsets are not fully implemented (Chrome issue)

So ideally polyfill should be made granular i.e., use native scroll timeline but implement time range auto or element-based offsets in the polyfill. This is a more involved undertaking that may require re-architecting the polyfill in a major way. So I suggest doing the first two as a first step.

[flackr]

Perhaps we should make the polyfill not auto-install if the feature is already available, but leave a function exposed to install it if desired from your script?

I'm not sure if installing parts of the polyfill will be useful longer term.

[bramus]

A potential way to fix this is to not have the polyfill register itself but provide it as an ES module.

Take the type-om polyfill for example, which you can load, and attach to window if need be:

import polyfill from "https://cdn.skypack.dev/css-typed-om";

if (typeof CSSKeywordValue == "undefined") {
    polyfill(window);
}

Would be nice if this polyfill worked in a similar way.

[flackr]

The polyfill used to provide an ES module, but this made it difficult to test it against the web platform tests which run immediately and required the polyfill installation to block the rest of the page code. I think the same concept can be accomplished without a module though.

[s-ol]

It seems this issue can be closed seeing that both the JS and CSS polyfills check for native features.

[mendelgordon]

What about using this?

<script type="module">
if (typeof ScrollTimeline === 'undefined') {
import("https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js")
.then(() => {
console.log("ScrollTimeline polyfill loaded.");
})
.catch((error) => {
console.error("Failed to load ScrollTimeline polyfill:", error);
});
} else {
console.log("ScrollTimeline is supported natively.");
}
</script>