Rounding error somewhere in the scale3d() transform on the image-canvas-wrapper element

[NielsLeenheer]

There is sometimes a black line on the right side of the image preview. For example:

The reason is that the scale3d() transform on the filepond--image-canvas-wrapper is slightly to small for the size of the filepond--image-preview element.

In the example above:

filepond--image-preview
The width set to 100%
Using the inspector measured at 424.500px

filepond--image-clip
The width set to 424.138px
Using the inspector measured at 424.125px ?!?!

filepond--image-canvas-wrapper
The width is set to 800px.
The transform of image-canvas-wrapper is scale3d(0.530172,0.530172,0)
This results is a size of 424.1376px.

[NielsLeenheer]

As a - not so pretty - workaround, I've added the following custom CSS:

        .filepond--image-clip {
            transform: translate3d(0px, 0px, 0px) scale3d(1.003, 1.003, 1) !important;
            transform-origin: top left;
        }

[rikschennink]

It's a browser rounding issue, not sure how to resolve this, adding transforms is tricky as it impacts performance and (based on image size) rendering quality of the image inside the file item.

Also, the lines can appear on all sides of the clip element. (this is Firefox on MacOS)

I suspect a better approach might be to always snap the file item panel height to a pixel. Or to hide the preview background color when the image clip fully covers it.

Suggestions or PRs are more than welcome. :)