Animation range can not be negative

[bramus]

Try https://flackr.github.io/scroll-timeline/demo/view-timeline/ and check “Use inset 100px 200px”.

Now keep an eye on the bar with the range entry 150% exit -50%. Because of the insets, the end range comes before the start range. As a result, the animation should jump from 0% to 100% when crossing the entry 150% line, because exit -50% was already crossed. With the polyfill however, the animation runs on the range exit -50% entry 150%.

The polyfill seems to allow the ranges to cross each other, resulting in a negative range.

I don’t immediately see this mentioned in the spec – I might be overlooking things – but it does appear in Blink’s source.