Bug 263013

Summary:

Canvas.drawImage() is very slow in private mode

Product:

WebKit

Reporter:

Luca Moroni <bidders.braces_0f>

Component:

Canvas

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED DUPLICATE

Severity:

Normal

CC:

dino, m_finkel, paul.neave, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

Safari 17

Hardware:

All

OS:

iOS 17

Attachments:

Description	Flags
a video recorded on iPhone11 that reproduces the issue	none

Description Luca Moroni 2023-10-11 07:09:15 PDT

Created attachment 468172 [details]
a video recorded on iPhone11 that reproduces the issue

Hello,

I've found an issue where the cavas.drawImage() API is up to 100 times slower on private mode than on "normal" mode.

I've been able to test the issue on:
- iOS 17.0.3 - iPhone 11
- iOS 17.0.2 - iPhone SE 2nd gen
- Safari 17.0 (18616.1.27.111.22, 18616) - MacBook Pro 14-inch, 2021 M1 - MacOS 13.6 (22G120)

And I've registered a slow down in all these devices.

I've put together a demo code pen that reproduces the issue: https://codepen.io/esnhoesnho/pen/NWeJdRV?editors=1010

To reproduce the bug just open the link above in private mode. The UI will print the measured milliseconds on top of the page.

I attach a video recorded on iPhone11.

Thanks,
Luca

Comment 1 Radar WebKit Bug Importer 2023-10-18 07:10:16 PDT

<rdar://problem/117132326>

Comment 2 Paul Neave 2023-12-15 10:48:03 PST

This bug occurs when Advanced Tracking and Fingerprinting Protection is enabled. This is on by default for private tabs in Safari 17.

I've filed an example in bug #266473. Try the following example code with "Use advanced tracking and fingerprinting protection" setting enabled under Settings > Advanced > Privacy. Website are unusable in this state.

`
<html>
<body>
<canvas id="canvas"></canvas>
<script>

const width = 800;
const height = 800;

const canvas = document.getElementById('canvas');
canvas.width = width;
canvas.height = height;
const context = canvas.getContext('2d');

const imageCanvas = document.createElement('canvas');
imageCanvas.width = width;
imageCanvas.height = height;
const imageContext = imageCanvas.getContext('2d');
imageContext.fillStyle = 'red';
imageContext.fillRect(0, 0, width, height);

console.time('drawImage');
context.drawImage(imageCanvas, 0, 0);
console.timeEnd('drawImage');

</script>
</body>
</html>
`

Comment 3 Luca Moroni 2023-12-22 06:27:10 PST

I confirm, this bug and #266473 looks the same.

I've got the feeling the the overall stability is reduced while working with canvases on 17.x . But this is hard to reduce to a simple example.

I hope that at least this issue will be mitigated in future releases.

Comment 4 Matthew Finkel 2024-01-13 13:31:35 PST

Thanks for reporting this, a fix for this is being work on in bug 266181.

*** This bug has been marked as a duplicate of bug 266181 ***