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.
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 theentry 150%line, becauseexit -50%was already crossed. With the polyfill however, the animation runs on the rangeexit -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.