search

airbnb / lottie-web

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
MIT License
30.61k stars 2.88k forks source link

setLocationHref doesn't work with parenthesis #1848

Open xel23 opened 5 years ago

xel23 commented 5 years ago

Hello!

I have problem with setLocationHref. I use setLocationHref for supporting animation in safari, but if I pass path which contains parenthesis "(" or ")", setLocationHref doesn't work as expected and animation starts glitching in any browsers.

jooohyunpark commented 5 years ago

I have similar issue. I get error that says setLocationHref is not a function. By logging, it seems like it's a part of Lottie, not anim which are stated in documentation.

bodymovin commented 4 years ago

@xel23 can you share a link with an example?

xel23 commented 4 years ago

@bodymovin try the same page with a different url parameters. Works fine: https://xel23.github.io/playground/?query=test

Doesn't work: https://xel23.github.io/playground/?query=test( https://xel23.github.io/playground/?query=test)

bodymovin commented 4 years ago

Not sure if this is related to the lottie library. Seems more of a general path issue. Can you try with a static svg using that url?

xel23 commented 4 years ago

I've investigated reason of this problem. setLocationHref is used for setting variable locationHref, so when we try to pass locationHref in css function url() we should escape ( and ) if we have them in argument which is passed in url(). I've prepared solution for this issue in pull request #1889 @bodymovin Could you please check?

maksimr commented 4 years ago

@bodymovin the problem in the code like this:

https://github.com/airbnb/lottie-web/blob/32c44ec48169f13de369d5a62a0dfd9ea5178f91/player/js/elements/svgElements/SVGBaseElement.js#L110

Because there are using unquoted URI notation for url we should escape some characters in URI. In our case, we should escape parentheses.

https://www.w3.org/TR/CSS2/syndata.html#uri

li { list-style: url(http://www.example.com/redball.png) disc } Some characters appearing in an unquoted URI, such as parentheses, white space characters, single quotes (') and double quotes ("), must be escaped with a backslash so that the resulting URI value is a URI token: '(', ')'.

@xel23 provided a solution with escaping parentheses but I think it's better to use a quoted notation for url and use encodeURI to escape not valid characters in URI.