Skip to content

Safari 18+ incorrect cropping #292

Open
@GrekStalker69

Description

@GrekStalker69

Hello there!

The issue recently arised where the cropper output image wasn't correct. Package version is 1.11.7(latest for vue2).

In short, when image is cropped with "empty margins" around it, actual output has top and left areas transparent as expected, but right and bottom are getting cut. As if incorrect width/height got applied to the canvas. Images should show the issue:

Source:
Image

Cropping:
Image

Output(had to resize it, because actual output is too big to be uploaded here, but only resizing, no cropping):
Image

Issue seems to only reproduce on safari/chrome/web-view on ios18 + Safari 18.1 (20619.2.8.11.10) for macos

Couldn't make it(quasar specifically) run in codesandbox, and whole vue component doesn't seem to display properly, so here's only the piece with cropper usage:

<cropper
        v-if="cropImageUrl"
        class="cropper"
        :src="cropImageUrl"
        :stencil-props="{}"
        :imageRestriction="'none'"
        @change="change"
        ref="cropper"
    />

I'll try to setup it in codesandbox tomorrow when team members with said devices are available.

Let me know if I can help in any way.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions