search

jlmakes / scrollreveal

Animate elements as they scroll into view.
https://scrollrevealjs.org/
22.3k stars 2.26k forks source link

URL in background images broken when splitting inline styles #531

Closed gildersleeve closed 3 years ago

gildersleeve commented 3 years ago

https://github.com/jlmakes/scrollreveal/blob/eb240482ab6b14db6c885ab7a1f51b7fb098ddfe/dist/scrollreveal.js#L764

If an inline style includes an absolute path to an image it will be split incorrectly here. The split assumes there is only 1 : but background images can introduce multiple :.

Example: <div style="background-image:url('https://www.example.com/test.jpg')"></div>. It would be incorrect to split on :.

Since the next line looks for the value as ref[1], what gets rendered here after running through scroll magic is <div style="background-image:url('https')"></div>

jlmakes commented 3 years ago

Thanks for catching this @gildersleeve!!