229986 2021-09-07 02:26:43 -0700 WebGL Canvas will not update when using putImageData with small area update. 2022-06-23 14:15:35 -0700 1 1 1 Unclassified WebKit WebGL Safari 14 Mac (Intel) macOS 11 RESOLVED CONFIGURATION CHANGED InRadar P2 Normal --- 1 lktc420 webkit-unassigned bfulgham dino gman kbr kkinnunen sabouhallawa webkit-bug-importer oldest_to_newest 1790903 0 437468 lktc420 2021-09-07 02:26:43 -0700 Created attachment 437468 The issue html that can reproduce the bug. Overview: When using Three.js WebGLRender and use canvas texture, if the canvas call putImageData with small area, the associate WebGL canvas will not update image. Steps to Reproduce: You can 100% easily reproduce the bug using the attachment index.html. Just click the page to see if the canvas update and showing a small rect with random color updating. And see this comment in file: // Without below 2 lines, the webgl canvas will not update. // textureCanvasCtx.fillStyle = '#00000000'; // textureCanvasCtx.fillRect(0, 0, 0, 1); this is the workaround to fix it. Also, when enable canvas recording in inspector, the webgl canvas will update correctly, wierd problem. Actual Results: When click page, webgl canvas not updating to show the small rect. Expected Results: When click page, webgl canvas should updating to show the small rect. Build Date & Hardware: MacOS 11.5.2 Safari 14.1.2 1790904 1 lktc420 2021-09-07 02:27:58 -0700 I tested chrome and firefox, both are ok. 1790905 2 lktc420 2021-09-07 02:31:04 -0700 Also u can change the image size up to 400*400, then its ok. 1791143 3 kbr 2021-09-07 11:42:59 -0700 Is there a size threshold for enabling something like GPU-accelerated 2D canvas? Does the associated 2D canvas->WebGL texture uploading code need to take non-accelerated canvases into account? 1791166 4 kbr 2021-09-07 12:48:52 -0700 I haven't debugged into this but this is failing on Safari Technology Preview as well as Safari 14. Was thinking maybe the ImageData constructor leaving off the optional height argument was buggy, but specifying the height didn't fix this bug. 1791321 5 lktc420 2021-09-07 19:09:22 -0700 Plz also notice that when enable canvas recording in inspector, the problem disappear during the recording. The canvas can update during the recording. 1792320 6 kkinnunen 2021-09-10 06:56:51 -0700 Thanks for the report! I did a layout test for this, but not a fix yet. After the first update, the putImageData is buggy due to some shortcutting that is visible to getImageData but is not visible when reading with WebGL. Probably related to flushes and the fact that putImageData puts the data into the memory area past CG context bookkeeping. 1793237 7 webkit-bug-importer 2021-09-14 02:27:21 -0700 <rdar://problem/83094422> 1877847 8 bfulgham 2022-06-23 14:15:35 -0700 We believe this is working properly in STP 145 (and newer), and in the upcoming Safari release (available in Beta now). 437468 2021-09-07 02:26:43 -0700 2021-09-07 02:26:43 -0700 The issue html that can reproduce the bug. index.html text/html 4236 lktc420 PGh0bWw+CjxoZWFkPgogIDxzdHlsZT4KICBodG1sLCBib2R5IHsgd2lkdGg6IDEwMCU7IGhlaWdo dDogMTAwJTsgYmFja2dyb3VuZDogIzAwMDsgfQogIGJvZHkgeyBtYXJnaW46IDA7IG92ZXJmbG93 OiBoaWRkZW47IH0KICBjYW52YXMgeyB3aWR0aDogMTAwJTsgaGVpZ2h0OiAxMDAlOyB9CiAgPC9z dHlsZT4KPC9oZWFkPgo8Ym9keT4KICA8c2NyaXB0IHNyYz0naHR0cHM6Ly9jZG5qcy5jbG91ZGZs YXJlLmNvbS9hamF4L2xpYnMvdGhyZWUuanMvODgvdGhyZWUubWluLmpzJz48L3NjcmlwdD4KICA8 c2NyaXB0PgoKICBmdW5jdGlvbiBnZXRTY2VuZSgpIHsKICAgIHZhciBzY2VuZSA9IG5ldyBUSFJF RS5TY2VuZSgpOwogICAgc2NlbmUuYmFja2dyb3VuZCA9IG5ldyBUSFJFRS5Db2xvcigweDExMTEx MSk7CiAgICByZXR1cm4gc2NlbmU7CiAgfQoKICBmdW5jdGlvbiBnZXRDYW1lcmEoKSB7CiAgICB2 YXIgYXNwZWN0UmF0aW8gPSB3aW5kb3cuaW5uZXJXaWR0aCAvIHdpbmRvdy5pbm5lckhlaWdodDsK Ly8gICAgIHZhciBjYW1lcmEgPSBuZXcgVEhSRUUuUGVyc3BlY3RpdmVDYW1lcmEoNzUsIGFzcGVj dFJhdGlvLCAwLjEsIDEwMDApOwogICAgdmFyIGNhbWVyYSA9IG5ldyBUSFJFRS5PcnRob2dyYXBo aWNDYW1lcmEoLTEsIDEsIDEsIC0xLCAwLCAxKTsKLy8gICAgIGNhbWVyYS5wb3NpdGlvbi5zZXQo MCwgMSwgNSk7CiAgICByZXR1cm4gY2FtZXJhOwogIH0KCiAgZnVuY3Rpb24gZ2V0UmVuZGVyZXIo KSB7CiAgICAvLyBDcmVhdGUgdGhlIGNhbnZhcyB3aXRoIGEgcmVuZGVyZXIKICAgIHZhciByZW5k ZXJlciA9IG5ldyBUSFJFRS5XZWJHTFJlbmRlcmVyKHtwcmVjaXNpb246ICJoaWdocCJ9KTsKICAg IC8vIEFkZCBzdXBwb3J0IGZvciByZXRpbmEgZGlzcGxheXMKICAgIHJlbmRlcmVyLnNldFBpeGVs UmF0aW8od2luZG93LmRldmljZVBpeGVsUmF0aW8pOwogICAgLy8gU3BlY2lmeSB0aGUgc2l6ZSBv ZiB0aGUgY2FudmFzCiAgICByZW5kZXJlci5zZXRTaXplKHdpbmRvdy5pbm5lcldpZHRoLCB3aW5k b3cuaW5uZXJIZWlnaHQpOwogICAgLy8gQWRkIHRoZSBjYW52YXMgdG8gdGhlIERPTQogICAgZG9j dW1lbnQuYm9keS5hcHBlbmRDaGlsZChyZW5kZXJlci5kb21FbGVtZW50KTsKICAgIHJldHVybiBy ZW5kZXJlcjsKICB9CgogIC8qKgogICogQ3JlYXRlIHJldGluYSBxdWFsaXR5IGNhbnZhcwogICoq LwogIHZhciBQSVhFTF9SQVRJTyA9IChmdW5jdGlvbiAoKSB7CiAgICB2YXIgY3R4ID0gZG9jdW1l bnQuY3JlYXRlRWxlbWVudCgnY2FudmFzJykuZ2V0Q29udGV4dCgnMmQnKSwKICAgICAgICBkcHIg PSB3aW5kb3cuZGV2aWNlUGl4ZWxSYXRpbyB8fCAxLAogICAgICAgIGJzciA9IGN0eC53ZWJraXRC YWNraW5nU3RvcmVQaXhlbFJhdGlvIHx8CiAgICAgICAgICAgICAgY3R4Lm1vekJhY2tpbmdTdG9y ZVBpeGVsUmF0aW8gfHwKICAgICAgICAgICAgICBjdHgubXNCYWNraW5nU3RvcmVQaXhlbFJhdGlv IHx8CiAgICAgICAgICAgICAgY3R4Lm9CYWNraW5nU3RvcmVQaXhlbFJhdGlvIHx8CiAgICAgICAg ICAgICAgY3R4LmJhY2tpbmdTdG9yZVBpeGVsUmF0aW8gfHwgMTsKICAgIHJldHVybiBkcHIgLyBi c3I7CiAgfSkoKTsKCiAgY3JlYXRlUmV0aW5hQ2FudmFzID0gZnVuY3Rpb24odywgaCwgcmF0aW8p IHsKICAgIGlmICghcmF0aW8pIHsgcmF0aW8gPSBQSVhFTF9SQVRJTzsgfQogICAgdmFyIGNhbiA9 IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2NhbnZhcycpOwogICAgY2FuLndpZHRoID0gdyAqIHJh dGlvOwogICAgY2FuLmhlaWdodCA9IGggKiByYXRpbzsKICAgIGNhbi5zdHlsZS53aWR0aCA9IHcg KyAncHgnOwogICAgY2FuLnN0eWxlLmhlaWdodCA9IGggKyAncHgnOwogICAgY2FuLmdldENvbnRl eHQoJzJkJykuc2V0VHJhbnNmb3JtKHJhdGlvLCAwLCAwLCByYXRpbywgMCwgMCk7CiAgICByZXR1 cm4gY2FuOwogIH0KCiAgbGV0IHRleHR1cmVDYW52YXMgPSBudWxsOwogIGxldCB0ZXh0dXJlQ2Fu dmFzQ3R4ID0gbnVsbDsKICBsZXQgdGV4dHVyZSA9IG51bGw7CgogIGZ1bmN0aW9uIGFkZFRleHR1 cmUoKSB7CiAgICB2YXIgdGV4dCA9ICdjYXRzJwogICAgLy9jcmVhdGUgaW1hZ2UKICAgIHRleHR1 cmVDYW52YXMgPSBjcmVhdGVSZXRpbmFDYW52YXMod2luZG93LmlubmVyV2lkdGgsIHdpbmRvdy5p bm5lckhlaWdodCk7CiAgICB0ZXh0dXJlQ2FudmFzQ3R4ID0gdGV4dHVyZUNhbnZhcy5nZXRDb250 ZXh0KCcyZCcsIHthbnRpYWxpYXM6IGZhbHNlfSk7CgogICAgdGV4dHVyZUNhbnZhc0N0eC5iZWdp blBhdGgoKTsKICAgIHRleHR1cmVDYW52YXNDdHgucmVjdCgwLCAwLCB3aW5kb3cuaW5uZXJXaWR0 aCwgd2luZG93LmlubmVySGVpZ2h0KTsKICAgIHRleHR1cmVDYW52YXNDdHguZmlsbFN0eWxlID0g J3JlZCc7CiAgICB0ZXh0dXJlQ2FudmFzQ3R4LmZpbGwoKTsKCiAgICAvLyBjYW52YXMgY29udGVu dHMgd2lsbCBiZSB1c2VkIGZvciBhIHRleHR1cmUKICAgIHRleHR1cmUgPSBuZXcgVEhSRUUuVGV4 dHVyZSh0ZXh0dXJlQ2FudmFzKQogICAgdGV4dHVyZS5tYWdGaWx0ZXIgPSBUSFJFRS5MaW5lYXJG aWx0ZXI7CiAgICB0ZXh0dXJlLm1pbkZpbHRlciA9IFRIUkVFLkxpbmVhckZpbHRlcjsKICAgIHRl eHR1cmUubmVlZHNVcGRhdGUgPSB0cnVlOwogICAgdmFyIG1hdGVyaWFsID0gbmV3IFRIUkVFLk1l c2hCYXNpY01hdGVyaWFsKHsgbWFwOiB0ZXh0dXJlIH0pOwogICAgdmFyIGdlb21ldHJ5ID0gbmV3 IFRIUkVFLlBsYW5lR2VvbWV0cnkoMiwgMik7CiAgICBjdWJlID0gbmV3IFRIUkVFLk1lc2goZ2Vv bWV0cnksIG1hdGVyaWFsKTsKICAgIHNjZW5lLmFkZChjdWJlKTsKICB9CgogIC8vIFJlbmRlciBs b29wCiAgZnVuY3Rpb24gcmVuZGVyKCkgewogICAgLy8gcmVxdWVzdEFuaW1hdGlvbkZyYW1lKHJl bmRlcik7CiAgICByZW5kZXJlci5yZW5kZXIoc2NlbmUsIGNhbWVyYSk7CiAgfTsKCiAgZnVuY3Rp b24gZ2V0UmFuZG9tSW50KG1pbiwgbWF4KSB7CiAgICBtaW4gPSBNYXRoLmNlaWwobWluKTsKICAg IG1heCA9IE1hdGguZmxvb3IobWF4KTsKICAgIHJldHVybiBNYXRoLmZsb29yKE1hdGgucmFuZG9t KCkgKiAobWF4IC0gbWluKSArIG1pbik7IC8vVGhlIG1heGltdW0gaXMgZXhjbHVzaXZlIGFuZCB0 aGUgbWluaW11bSBpcyBpbmNsdXNpdmUKICB9CgogIGZ1bmN0aW9uIGRyYXdSYW5kb21JbWFnZShj dHgpIHsKICAgIGNvbnN0IGFyciA9IG5ldyBVaW50OENsYW1wZWRBcnJheSgxNjAwKTsKICAgIGxl dCBjciA9IGdldFJhbmRvbUludCgwLCAyNTUpOwogICAgbGV0IGNnID0gZ2V0UmFuZG9tSW50KDAs IDI1NSk7CiAgICBsZXQgY2IgPSBnZXRSYW5kb21JbnQoMCwgMjU1KTsKICAgICAgLy8gSXRlcmF0 ZSB0aHJvdWdoIGV2ZXJ5IHBpeGVsCiAgICAgIGZvciAobGV0IGkgPSAwOyBpIDwgYXJyLmxlbmd0 aDsgaSArPSA0KSB7CiAgICAgICAgYXJyW2kgKyAwXSA9IGNyOyAgICAvLyBSIHZhbHVlCiAgICAg ICAgYXJyW2kgKyAxXSA9IGNnOyAgLy8gRyB2YWx1ZQogICAgICAgIGFycltpICsgMl0gPSBjYjsg ICAgLy8gQiB2YWx1ZQogICAgICAgIGFycltpICsgM10gPSAyNTU7ICAvLyBBIHZhbHVlCiAgICAg IH0KCiAgICAgIC8vIEluaXRpYWxpemUgYSBuZXcgSW1hZ2VEYXRhIG9iamVjdAogICAgICBsZXQg aW1hZ2VEYXRhID0gbmV3IEltYWdlRGF0YShhcnIsIDIwKTsKCiAgICAgIC8vIERyYXcgaW1hZ2Ug ZGF0YSB0byB0aGUgY2FudmFzCiAgICAgIGN0eC5wdXRJbWFnZURhdGEoaW1hZ2VEYXRhLCAyMCwg MjApOwogIH0KCiAgd2luZG93LmFkZEV2ZW50TGlzdGVuZXIoImNsaWNrIiwgKCkgPT4gewogICAg Y29uc29sZS5sb2coImNsaWNrIik7CgogICAgLy8gV2l0aG91dCBiZWxvdyAyIGxpbmVzLCB0aGUg d2ViZ2wgY2FudmFzIHdpbGwgbm90IHVwZGF0ZS4KICAgIC8vIHRleHR1cmVDYW52YXNDdHguZmls bFN0eWxlID0gJyMwMDAwMDAwMCc7CiAgICAvLyB0ZXh0dXJlQ2FudmFzQ3R4LmZpbGxSZWN0KDAs IDAsIDAsIDEpOwogICAgZHJhd1JhbmRvbUltYWdlKHRleHR1cmVDYW52YXNDdHgpOwogICAgdGV4 dHVyZS5uZWVkc1VwZGF0ZSA9IHRydWU7CiAgICByZW5kZXIoKTsKICB9KTsKCiAgdmFyIHNjZW5l ID0gZ2V0U2NlbmUoKTsKICB2YXIgY2FtZXJhID0gZ2V0Q2FtZXJhKCk7CiAgdmFyIHJlbmRlcmVy ID0gZ2V0UmVuZGVyZXIoKTsKICBhZGRUZXh0dXJlKCk7CiAgcmVuZGVyKCk7CgogIDwvc2NyaXB0 Pgo8L2JvZHk+CjwvaHRtbD4K