Canvas Events Not Functioning Correctly on iOS Devices, Working as Expected on Android

[Arkit-Sutariya]

CheckList

• [X] I agree to follow this project's Code of Conduct
• [X] I have read and followed the Contributing Guide
• [X] I have read and followed the Issue Tracker Guide
• [X] I have searched and referenced existing issues and discussions
• [X] I am filing a BUG report.
• [X] I have managed to reproduce the bug after upgrading to the latest version
• [X] I have created an accurate and minimal reproduction

Version

6.0.2

In What environments are you experiencing the problem?

Safari

Node Version (if applicable)

None

Link To Reproduction

No

Steps To Reproduce

I’m working with Angular 18.2.0 and Fabric.js 6.3.0 to implement an image cropping functionality in my editor page using a third-party JS library. The cropping feature is triggered when the user double-clicks on the canvas. This functionality works perfectly on web browsers and Android devices in Chrome, but I’m facing issues on iOS devices (Safari and Chrome). Here's a summary of the logic implemented:

`ngOnInit() { this.canvas = new Canvas('canvas', { fireRightClick: true, enablePointerEvents: true, }); this.canvas.on({ 'mouse:dblclick': (e) => { this.listener = new FabricCropListener(this.canvas); this.listener.crop(); }, 'touchstart': (e) => { this.cropImage(); }, 'pointerdown': (e) => { this.cropImage(); } }); }

cropImage() { this.listener = new FabricCropListener(this.canvas); this.listener.crop(); } `

Expected Behavior

I want to trigger double-clicks event in iOS devices also but using my above code i'm not able to trigger event.

Actual Behavior

The code works seamlessly on web and Android devices using Chrome, but when testing on iOS devices (Safari and Chrome), the double-click logic fails to trigger the cropping functionality.

Error Message & Stack Trace

No response

[Arkit-Sutariya]

Hello @asturur Could you please review the below issue I posted two days ago?

https://github.com/fabricjs/fabric.js/discussions/10157

[asturur]

Is the same low quality sample scattered in a message, i m not sure how you can think someone is going to sit down and build your code in a way it can then test it on its own apple device, admitted he has one.

Do you understand that in order to even see what is wrong i have to:

• format your code
• install angular and dependencies
• make an actual application around your code
• start the application somewhere and tether an iphone to run it locally or deploy the app somewhere
• actually find an IPHONE or an IPAD

[Arkit-Sutariya]

I would like to understand why the canvas events behave differently on iOS and Android devices. Is there an alternative approach to trigger double-click functionality on iOS, aside from the current implementation?

The code primarily consists of 2-3 Fabric.js canvas events and another function within the Angular framework. Given your familiarity with Fabric.js canvas events, I believe you can suggest an efficient solution for handling double-clicks on iOS without needing to review my incomplete code.

Any suggestions or hints would be greatly appreciated.