search

bramus / scroll-driven-animations-debugger-extension

Browser extension to debug Scroll-Driven Animations
40 stars 1 forks source link

Range Editor: vh range values (and other non-absolute units) are shown as calculated pixel values #17

Open bramus opened 1 year ago

bramus commented 1 year ago

E.g. https://scroll-driven-animations.style/demos/cover-to-fixed-header/css/

When you inspect the#sticky-parallax-header element and edit the range, the animation-range-end shows up as a pixel value. This is not how it was declared in the CSS. The CSS reads animation-range: 0vh 90vh.

bramus commented 1 year ago

Unfortunately this is how the values are represented to me when reading the rangeStart and rangeEnd from the Animation instance. Same with getComputedStyle: the specified values have been computed to px values.

I don’t see a way – without resorting to parsing the stylesheet and running my own cascade - how to get these specified values. Marking as https://github.com/bramus/scroll-driven-animations-debugger-extension/labels/wontfix and adding it to the https://github.com/bramus/scroll-driven-animations-debugger-extension/labels/FAQ.

bramus commented 1 year ago

Reopening so that the issue can be found when searching (because search defaults to non-closed issues)