It depends on the browser window size if the image cropping area can be expanded to the full image size or only to full size minus one. It should be always possible to expand it to full size.

Steps to reproduce¶

1. Resize your browser window to width of 1100px via the browser developer tools.
2. Log into TYPO3 backend.
3. Create a common "Text & Media" content element on a page.
4. Add the image t3docs-report-2021-disable-dummy-url.png in the Media tab to the content element.
5. Open the image manipulation overlay by Image Manipulation > Open Editor .
6. Confirm that the height of the cropping area is set to 23px - the dimension is displayed in the sidebar on the right.
7. Drag the cropping area to full image height.
8. Confirm that the height is still set to 23px, although the full image height is 24px.

When performing the same steps with an initial browser window width of 1200px, the cropping area can be set to the full height of 24 px.

Findings¶

This seems to be a pixel rounding issue of position and dimension in Build/Sources/TypeScript/backend/Resources/Public/TypeScript/ImageManipulation.ts:cropMoveHandler(): The incoming Cropper event might not hand in the full image height, but the full image height minus a minimal fraction, e.g.

(1) t3docs-report-2021-disable-dummy-url.png with website resolution 1100 x 400px and cropping area expanded to full height (24px):
---
event { type: "crop", x: 0, y: 0, width: 194, height: 23.999999999999996, rotate: 0, scaleX: 1, scaleY: 1, .. }
---

(2) t3docs-report-2021-disable-dummy-url.png with website resolution 1200 x 400px and cropping area expanded to full height (24px):
---
event { type: "crop", x: 0, y: 0, width: 194, height: 24, rotate: 0, scaleX: 1, scaleY: 1, .. }
---

The event handler cropMoveHandler() probably has to replace Math.floor() with Math.round() in some places and make sure, that the size can never exceed the image size.