Open NielsLeenheer opened 4 years ago
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;
}
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. :)
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 thefilepond--image-preview
element.In the example above:
filepond--image-preview
The width set to100%
Using the inspector measured at 424.500pxfilepond--image-clip
The width set to424.138px
Using the inspector measured at 424.125px ?!?!filepond--image-canvas-wrapper
The width is set to800px
. The transform ofimage-canvas-wrapper
isscale3d(0.530172,0.530172,0)
This results is a size of 424.1376px.