Rich-Harris / ramjet

Morph DOM elements from one state to another with smooth animations and transitions

Home Page:http://www.rich-harris.co.uk/ramjet/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Percentage-based Border Radii

mattrothenberg opened this issue · comments

Howdy! First and foremost, thanks for building + maintaining this library! It's been an invaluable asset to my open-source lib, https://github.com/mattrothenberg/vue-overdrive.

In upgrading to 0.6.0-alpha, I noticed (what I think is) a regression around percentage-based radii. Simply put, if one of the nodes passed to the transform function has a border-radius with a percentage in it, ramjet barfs with the following error.

screen shot 2018-12-24 at 10 29 00 am

Upon closer inspection, it seems like the following line might be the culprit. https://github.com/Rich-Harris/ramjet/blob/master/src/utils/parseBorderRadius.js#L1

var borderRadiusRegex = /^(\d+)px(?: (\d+)px)?$/;

I figured you might have better context than myself as to what might have changed between versions.

I've set up a Codepen that reproduces the error.

Demo: https://streamable.com/sphja
Link: https://codepen.io/mattrothenberg/pen/MZbdNx?editors=0111

❤️