Filepond: Hover animation stops working properly when using transform on container element

[samjmckenzie]

Summary

When styling the parent container element of a FilePond element, the hover animation on the FilePond element stops functioning as intended. The circle will appear in the wrong position depending on how the container element is transformed.

How to reproduce

Create a div with the style property transform: translateX(10%) or any transform function that either changes the size or position of the element. The FilePond element inside of that div will now have a hover animation that doesn't work properly.

http://jsfiddle.net/r7b4Lx5a/12/

Expected behaviour

The hover circle doesn't change position.

Environment

I've tested the issue on 3 browsers: Chrome, Safari & Firefox. The issue happens on the latest version of Chrome (68.0.3440.106) and Safari (11.1.2 (13605.3.8)), but not on the latest version of Firefox (61.0.2).

[rikschennink]

Thanks for the detailed error report @samjmckenzie, super helpful, I'll probably be able to pick this up next week.

I do want to note that it would be best to not transform the FilePond parent as it could negatively impact its performance.

[samjmckenzie]

I'll add that in my use case, it's not the direct parent of the FilePond element that has the transform style property. The FilePond element is actually a second level child of the element that has been transformed. It was actually being used to center the element (left: 50%; transform: translateX(-50%);), but I will be replacing it with a flexbox alternative anyway since it's better practice.

[rikschennink]

Just published version 2.1.1 which fixes this issue, thanks again for reporting @samjmckenzie