Bug 195325 - Canvas elements not garbage collected immediately in Safari on iOS 12
Summary: Canvas elements not garbage collected immediately in Safari on iOS 12
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Canvas (show other bugs)
Version: Safari 12
Hardware: iPhone / iPad iOS 12
: P2 Normal
Assignee: Nobody
URL: https://output.jsbin.com/ganafaketa/1
Keywords: InRadar
Depends on:
Reported: 2019-03-05 05:11 PST by Esseb
Modified: 2019-08-05 12:41 PDT (History)
7 users (show)

See Also:

Testcase (2.61 KB, text/html)
2019-03-05 05:11 PST, Esseb
no flags Details
Screenshot from TimeLine in Safari developer tools (68.18 KB, image/png)
2019-03-05 05:35 PST, Esseb
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Esseb 2019-03-05 05:11:55 PST
Created attachment 363637 [details]

Canvas elements without a strong references do not get garbage collected immediately in Safari on iOS 12. No issues in iOS 11.

There is more information on https://stackoverflow.com/questions/52532614/total-canvas-memory-use-exceeds-the-maximum-limit-safari-12 which also indicate it can occur in Safari on Mac also, but the higher canvas memory limit makes it harder to trigger the bug there.

The regression between Safari on iOS 11 and iOS 12 could be as a result of https://github.com/WebKit/webkit/commit/5d5b478917c685e50d1032ccf761ca53fc8f1b74#diff-b411cd4839e4bbc17b00570536abfa8f making the bug easier to hit with the lower canvas memory limit.

If I explicitly set the canvas elements width and height to 0 before removing references to the canvas elements the issue disappears.

This bug causes a problem with the map on https://www.yr.no/en/map/radar/1-72837/Norway/Oslo/Oslo/Oslo which uses OpenLayers. OpenLayers has an issue tracking this issue also on https://github.com/openlayers/openlayers/issues/9166

I've attached a testcase, but the testcase is also available on https://output.jsbin.com/ganafaketa/1

I've tested this bug with iOS 12.1.4 on an iPhone X.
Comment 1 Esseb 2019-03-05 05:29:08 PST
The error message I get when the bug occurs is:

TypeError: null is not an object (evaluating 'context.fillRect')
Comment 2 Esseb 2019-03-05 05:35:57 PST
Created attachment 363639 [details]
Screenshot from TimeLine in Safari developer tools

I've added a screenshot from TimeLine in Safari developer tools.

I followed the testcase instructions when recording that timeline, the button click that triggered the error message was done just after the 13 second mark.
Comment 3 Sam Sneddon [:gsnedders] 2019-03-05 05:55:42 PST
Interestingly, I can reproduce this in STP 76 on macOS Mojave, but not on Safari 12.0.3.

In STP, there's very few GCs happening while memory consumption increases as you press the button and none lead to the memory reported in the Timeline decreasing.
Comment 4 Radar WebKit Bug Importer 2019-03-05 12:28:47 PST
Comment 5 Simon Fraser (smfr) 2019-08-05 12:41:04 PDT
Console says:
[Warning] Total canvas memory use exceeds the maximum limit (384 MB). (runner, line 31)