[MGNLUI-4129] Media Editor shows distorted image with incorrect aspect ratio when using the 'Crop image' functionality Created: 30/Jan/17  Updated: 07/Mar/17  Resolved: 03/Mar/17

Status: Closed
Project: Magnolia UI
Component/s: media editor
Affects Version/s: 5.5.1
Fix Version/s: 5.4.12, 5.5.3

Type: Bug Priority: Neutral
Reporter: Federico Navarro Assignee: Federico Grilli
Resolution: Fixed Votes: 1
Labels: None
Remaining Estimate: 0d
Time Spent: 2d 3h
Original Estimate: Not Specified

Attachments: PNG File MediaEditor.CropScaled.Safari.png     PNG File MediaEditor1.png     PNG File MediaEditor2.StartCropping.png     PNG File MediaEditor3.ClickOnScaleToFit.png     PNG File MediaEditor4.ClickOnScaleToActual.png     PNG File MediaEditor5.ClickOnScaleToFit.png     PNG File MediaEditor6.ClickOnScaleToFit.png    
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Bug DoR:
[ ]* Steps to reproduce, expected, and actual results filled
[ ]* Affected version filled
Date of First Response:
Sprint: Basel 85
Story Points: 8

 Description   

When using the crop functionality in the media editor (eg: Upload asset in Assets app), the image is set to automatically "scale to fit". However, this produces a distorted version of the image with incorrect aspect ratio.

Furthermore, combining the operation "Zoom to fit" with "Crop Image" is inconsistent and produces different results depending on the state.

The expected result is to have a scaled version that fits the screen while keeping the aspect ratio of the original image.

See attached:

  • MediaEditor1 : Initial state of the media editor after opening a big portrait image (in the example, 2304x3072px)
  • MediaEditor2.StartCropping : after clicking on "Crop Image", the image is automatically scaled to fit, but the aspect ratio is lost. Note that the initial cropping area is actually a 200x200 square, and it looks like a rectangle.
  • MediaEditor3.ClickOnScaleToFit : after clicking on "ZoomToFit", the image remains distorted, but note that the displayed image changes slightly (now there are no scrollbars and there is a little bit of black margin)
  • MediaEditor4.ClickOnScaleToActual : after clicking on "Zoom to actual size", the image is displayed with the correct aspect ratio and size.
  • MediaEditor5.ClickOnScaleToFit : after clicking again on "Zoom to fit", yet another different dimension is displayed, much smaller than screen size and still with incorrect aspect ratio.
  • MediaEditor6.ClickOnScaleToFit : after clicking one more time on "Zoom to fit", the same result as MediaEditor3 screenshot is shown.

This misbehaviour has been tested on both Chrome and Firefox on Mac and Windows. It works as expected on Safari.

Tested on:

  • Chrome 56.0.2924.76 . Wrong aspect ratio
  • Firefox 51.0.1 . Wrong aspect ratio
  • IE Edge . Wrong aspect ratio
  • Safari 10.0.2 (11602.3.12.0.1) . Correct aspect ratio

Generated at Mon Feb 12 09:13:33 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.