Bug 218168 - iOS safari WebGL memory leak in iframe
Summary: iOS safari WebGL memory leak in iframe
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: WebGL (show other bugs)
Version: Safari 14
Hardware: iPhone / iPad Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2020-10-25 23:25 PDT by bjtuwanglei@gmail.com
Modified: 2020-11-01 23:16 PST (History)
4 users (show)

See Also:


Attachments
memory leak log (68.64 KB, image/jpeg)
2020-10-25 23:25 PDT, bjtuwanglei@gmail.com
no flags Details
Test Case (2.67 KB, text/html)
2020-10-26 14:29 PDT, Smoley
no flags Details
XCode Instruments' Activity Monitor view of the first time open test web page. (84.94 KB, image/jpeg)
2020-10-27 19:50 PDT, bjtuwanglei@gmail.com
no flags Details
XCode Instruments' Activity Monitor view of the first time open "WebGL Sample" page. (125.56 KB, image/jpeg)
2020-10-27 19:51 PDT, bjtuwanglei@gmail.com
no flags Details
XCode Instruments' Activity Monitor view after switch from "WebGL sample" to "about:blank" 30 times. (121.57 KB, image/jpeg)
2020-10-27 19:53 PDT, bjtuwanglei@gmail.com
no flags Details
XCode Instruments' Activity Monitor view after switch from "WebGL sample" to "about:blank" 30 times, and wait 2 minutes. (115.80 KB, image/jpeg)
2020-10-27 19:54 PDT, bjtuwanglei@gmail.com
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description bjtuwanglei@gmail.com 2020-10-25 23:25:49 PDT
Created attachment 412291 [details]
memory leak log

Test environment: iPad6 iOS 14

I have a sample html with a iframe in it.Each time the iframe switch from webgl page to blank,memory leak occurs.Repeat this safari will finally crash and reload.

Safari memory usage can be seen from perfdog(perfdog.wetest.net).Note: filter process to "com.apple.WebKit.WebContent".

Attach is memory leak log pic.

Test iframe page:

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        * {
            box-sizing: border-box;
        }

        /* Create two equal columns that floats next to each other */
        .column {
            float: left;
            width: 80%;
            padding: 10px;
            height: 600px;
            /* Should be removed. Only for demonstration */
        }

        .column2 {
            float: left;
            width: 20%;
            padding: 10px;
            height: 600px;
            /* Should be removed. Only for demonstration */
        }

        /* Clear floats after the columns */
        .row:after {
            content: "";

            clear: both;
        }
    </style>
</head>

<body>
    <script>
        function htmlToElement(html) {
            var template = document.createElement('template');
            html = html.trim(); // Never return a text node of whitespace as the result
            template.innerHTML = html;
            return template.content.firstChild;
        }

        function createIframeIfNotExists() {
            let iframe = document.getElementById("iframe");
            if (!iframe) {
                const deviceLostHtmlString = `
                    <iframe id="iframe" src="" width="100%" height="100%" title="Iframe Example"></iframe>
                    `;
                iframe = htmlToElement(deviceLostHtmlString);
                document.getElementById("iframe_parent").appendChild(iframe);
            }
            return iframe;
        }

        function toWebgl() {
            createIframeIfNotExists().src = "https://webglsamples.org/aquarium/aquarium.html";
        }
        function toBlank() {
            let iframe = document.getElementById("iframe");
            if (iframe) {
                iframe.src = "about:blank";
                // iframe.contentWindow.document.write('');
                // iframe.contentWindow.document.clear();
                // iframe.parentNode.removeChild(iframe);
            }
        }
        function toGitee() {
            createIframeIfNotExists().src = "https://gitee.com";
        }
    </script>

    <h2>Two Equal Columns</h2>

    <div class="row">
        <div id="iframe_parent" class="column" style="background-color:#aaa;">
            <!-- <iframe id="iframe" src="" width="100%" height="100%" title="Iframe Example"></iframe> -->
        </div>
        <div class="column2" style="background-color:#bbb;">
            <button onclick="toBlank()">about:blank</button>
            <button onclick="toWebgl()">WebGL sample</button>
            <button onclick="toGitee()">gitee</button>
        </div>
    </div>
</body>

</html>
Comment 1 Smoley 2020-10-26 14:29:58 PDT
Created attachment 412354 [details]
Test Case
Comment 2 Smoley 2020-10-26 14:34:44 PDT
Thanks for filing, I have not been able to reproduce this so far with the attached test case on iOS 14.0 or the 14.2 beta.

Aside from switching back and forth between the webGL demo and about:blank repeatedly, is there anything else required to reproduce this? I also tried to increase the number of elements drawn in the demo each time but did not encounter a crash.
Comment 3 Radar WebKit Bug Importer 2020-10-26 14:34:56 PDT
<rdar://problem/70695521>
Comment 4 bjtuwanglei@gmail.com 2020-10-27 19:48:51 PDT
(In reply to Smoley from comment #2)
> Thanks for filing, I have not been able to reproduce this so far with the
> attached test case on iOS 14.0 or the 14.2 beta.
> 
> Aside from switching back and forth between the webGL demo and about:blank
> repeatedly, is there anything else required to reproduce this? I also tried
> to increase the number of elements drawn in the demo each time but did not
> encounter a crash.

I revised the test method:

Open web page https://bugs.webkit.org/attachment.cgi?id=412354 in safari.And use XCode Instruments' Activity Monitor to view the safari's memory usage.

Attachments are memory usage of:
    The first time open test web page.
    The First time open "WebGL Sample" page.
    After switch from "WebGL sample" to "about:blank" 30 times.
    After switch from "WebGL sample" to "about:blank" 30 times, and wait 2 minutes.
Comment 5 bjtuwanglei@gmail.com 2020-10-27 19:50:49 PDT
Created attachment 412501 [details]
XCode Instruments' Activity Monitor view of the first time open test web page.
Comment 6 bjtuwanglei@gmail.com 2020-10-27 19:51:28 PDT
Created attachment 412502 [details]
XCode Instruments' Activity Monitor view of the first time open "WebGL Sample" page.
Comment 7 bjtuwanglei@gmail.com 2020-10-27 19:53:37 PDT
Created attachment 412503 [details]
XCode Instruments' Activity Monitor view after switch from "WebGL sample" to "about:blank" 30 times.
Comment 8 bjtuwanglei@gmail.com 2020-10-27 19:54:37 PDT
Created attachment 412504 [details]
XCode Instruments' Activity Monitor view after switch from "WebGL sample" to "about:blank" 30 times, and wait 2 minutes.
Comment 9 bjtuwanglei@gmail.com 2020-10-27 20:02:44 PDT
And as memory continually increase, the webcontent process will eventually crash, but safari will refresh the page and recreate webcontent process.
Comment 10 Kimmo Kinnunen 2020-11-01 23:16:35 PST
Thanks for reporting. We have changed a bit how WebGL manages the back buffers in trunk. It was reported in bug 217212 that this work did fix some leaks.