Safari object-fit: cover

[dfrench1]

Describe the bug
Hi I am having a problem with object-fit and translate. When zooming and moving the image to the left or right, this causes the image to be cut off from the edge of the container. This happens when it switches between the cropped image and the cropper component. It is happening consistently on Safari browser and rarely on Chrome.

Each image has an 'Edit' button that is used to conditionally render either the Image with css translated values (when not cropping) or the Cropper component (while cropping). For ease, the sandbox is using the same image but in production it would be a variety of image width/heights

To Reproduce

1. With Safari browser
2. Go to https://codesandbox.io/p/sandbox/staging-voice-x3l43m?file=%2Fsrc%2FCropper.tsx%3A9%2C52
3. Click the 'Edit' button on an image
4. Zoom in
5. Drag to the left or right edge
6. Click the 'Save' button

Screen.Recording.2024-05-13.at.19.44.45.1.mov

Expected behavior
Image fits into the container after being translated to match behaviour on chrome browser

[ValentinH]

I'm struggling with Codesandbox on Safari so I cannot try it but adding willChange: "transform" to the image should help.

See https://codesandbox.io/p/sandbox/staging-voice-forked-h7rffm?file=%2Fsrc%2Findex.tsx%3A10%2C12

[dfrench1]

thanks for the quick response, i dont have access to that sandbox

[ValentinH]

It should be good now 🙂

[dfrench1]

great, i see you removed the cropSize prop which i hear causes more problems then solves.
How would i update the aspect logic so that the crop area always fits the entire width/height of the image container?

[ValentinH]

You can compute it based on the width and height of the container.