Exception when calculating start offset TypeError: Unhandled unit type vh (in Firefox)

lirtistan commented 3 months ago

Hi,

in Firefox 128.0.2 (64-bit) i get this error. See screenshot for more info...

...i wanted to implement a nice header resize effect, as i have seen in one of the demo sites you provided here https://scroll-driven-animations.style/demos/cover-to-fixed-header/css/

Here is what i did...

1.) Downloaded the scroll-timeline.js file so i can bundle it into my artifacts. It's now part of my common.js bundle, i just put it on the end, all bundled libraries inside this single file are surrounded by there own IIFE. 2.) Ensured that this bundle is part of my main layout, so all sites/routes are including common.js. 3.) Back to work as usual, i created a playground page for testing, just to see if everything is working.

Below this line i attach all necessary content, for further investigation. I also added the transpiled common.js file as is, maybe there is something wrong and i didn't see it. common.zip

Its a Rails 7.1.3.4 project, using esbuild v0.21.5, just for javascript assets. All files are ESM no CJS, also no (importmap) in use.

# _6.html.erb -> http://localhost/playground/6
<% set_title "playground 6" %>

<%= javascript_include_tag "controllers/playground6_controller", nonce: true %>

<style>
    :root { background: #2A2C3A; }

    #bg {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate( -50%, -50% );
        width: 100vw;
        height: 100vh;
        background:
                linear-gradient( 45deg, black 20%, transparent 50% ),
                linear-gradient( -45deg, #1abb9f 0%, #cc004e 100% );
    }

    .glass-pane {
        margin: 1rem;
        padding: 1rem;
        min-height: 5rem;
        color: white;
        background: rgba( 255,255,255, 0.1 );
        backdrop-filter: blur( 5px );
        & > p {}
    }

    /* scroll-timeline.js polyfill */
    @keyframes sticky-parallax-header-move-and-size {
        from {
            background-position: 50% 0;
            height: 100vh;
            font-size: calc(4vw + 1em);
        }
        to {
            background-position: 50% 100%;
            background-color: #0b1584;
            height: 10vh;
            font-size: 2em;
        }
    }

    #sticky-parallax-header {
        position: fixed;
        top: 0;
        z-index: 2;

        color: white;
        background: transparent;
        width: 100%;
        height: 100%;

        animation: sticky-parallax-header-move-and-size linear forwards;
        animation-timeline: scroll();
        animation-range: 0vh 90vh;
    }

    body {
        padding-top: 100vh;
    }
</style>

<canvas id="bg" data-controller="playground-controller"></canvas>

<div id="sticky-parallax-header" class="d-flex align-items-center justify-content-center">
    <p>Header</p>
</div>

<% 15.times do |idx| %>
    <div class="glass-pane">
        <p>
            some content
        </p>
    </div>
<% end %>

# application.erb -> template for all sites/routes
<!DOCTYPE html>
<html lang="en">
  <head>
    <title id="head_title"><%= content_for?( :title ) ? yield( :title ) : "Title missing!!!" %></title>
    <meta name="description" content="foo">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="theme-color" content="#000">
    <%= csrf_meta_tags %>
    <%= action_cable_meta_tag %>
    <%= stylesheet_link_tag "bundle/common", "data-turbo-track": "reload" %>
    <%= content_for?( :stylesheet_link_tag ) ? yield( :stylesheet_link_tag ) : "" %>
    <%= javascript_include_tag "bundle/common", nonce: true, "data-turbo-track": "reload" %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

// common.ts -> transpiled to bundle/common.js and part of the main layout 
import "@hotwired/turbo-rails"
//import "../channels/index"

import "../libs/3rdparty/scroll-timeline.js"

lirtistan commented 3 months ago

Oh, maybe its relevant but i didn't tried the pure js solution, because most chrome based browsers are covered now by the pure css rule syntax, so i thought its better to go with the css solution then.

bramus commented 2 weeks ago

Duplicate of #266

flackr / scroll-timeline

Exception when calculating start offset TypeError: Unhandled unit type vh (in Firefox) #277