Bug 246074

Summary: [iOS 16.0 Safari] When fill text on canvas with web font, it refreshes or disappears.
Product: WebKit Reporter: INHO <ihyeom>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Major CC: bfulgham, cdumez, ihyeom, mattwoodrow, mmaxfield, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 16   
Hardware: iPhone / iPad   
OS: iOS 16   
URL: http://fs.m2soft.co.kr/report2/test/sample.html
Attachments:
Description Flags
console log from Xcode
none
This is the Instruments profile of the app using wkwebview
none
html including javascript code for bugs none

INHO
Reported 2022-10-05 02:19:45 PDT
Created attachment 462808 [details] console log from Xcode Hi. I'm Inho. After updating to ios 16, there was a problem with our web application. Device: iPhone X OS: iOS 16.0 (20A362) The problem that the page often refreshes or distorts while drawing quite a bit of text to the canvas. (This looks like a memory leak.) Below is the URL of the web page where the problem is occurrence. (The sample uses google font.) The strange thing is that it doesn't happen if you use a local font. This only happens when using web fonts. [Sample URL]: http://fs.m2soft.co.kr/report2/test/sample.html The sample app behaves like this: 1. There are some layers including canvas. (Structure similar to our app) 2. Assign property values such as "font" to canvas. 3. Fill the canvas with text. (context.fillText) 4. Repeat 1-3 every 1 second. (Css properties like transform are settings for occurrence.) This happens often, with both safari and wkwebview. When it occurs in wkwebview, the following error is reported in the Xcode console. (details are in the attachment.) ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ [Process] 0x110050380 - GPUProcessProxy::didClose: [Process] 0x110050380 - GPUProcessProxy::gpuProcessExited: reason=Crash [Process] 0x1110009d0 - [PID=3830] WebProcessProxy::gpuProcessExited: reason=Crash [assertion] Error acquiring assertion: <Error Domain=RBSServiceErrorDomain Code=1 "target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit" UserInfo={NSLocalizedFailureReason=target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit}> [ProcessSuspension] 0x11001c300 - ProcessAssertion::acquireSync Failed to acquire RBS assertion 'GPUProcess Background Assertion' for process with PID=3832, error: Error Domain=RBSServiceErrorDomain Code=1 "target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit" UserInfo={NSLocalizedFailureReason=target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit} ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ Questions: Is this a bug in webkit? It happened very infrequently even before ios 16, but it's been happening very often since 16.
Attachments
console log from Xcode (12.61 KB, text/plain)
2022-10-05 02:19 PDT, INHO 		no flags
Details
This is the Instruments profile of the app using wkwebview (39.63 MB, application/x-compressed)
2022-10-06 19:16 PDT, INHO 		no flags
Details
html including javascript code for bugs (3.29 KB, text/html)
2022-10-06 23:34 PDT, INHO 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
INHO
Comment 1 2022-10-05 02:27:13 PDT
This is the capture of the problem: http://fs.m2soft.co.kr/report2/test/bug.jpg
Radar WebKit Bug Importer
Comment 2 2022-10-06 13:03:09 PDT
<rdar://problem/100866403>
INHO
Comment 3 2022-10-06 19:16:43 PDT
Created attachment 462855 [details] This is the Instruments profile of the app using wkwebview - This is a record of about 20 seconds. - Low Memory warning (00:16.025 seconds) logged - The problem occurred around this time, and GPU crash was logged in the Xcode console.
INHO
Comment 4 2022-10-06 23:34:27 PDT
Created attachment 462860 [details] html including javascript code for bugs
INHO
Comment 5 2022-10-06 23:40:55 PDT
Comment on attachment 462860 [details] html including javascript code for bugs ><!DOCTYPE html> ><html style="margin:0;height:100%"> ><head> > <meta name="viewport" content="width=device-width, initial-scale=1" /> > <meta charset="utf-8"> > <title>GPU crash</title> > > <style> > @font-face { > font-family: "web-NanumGothic-Regular"; > src: url("http://fs.m2soft.co.kr/report2/test/NanumGothic-Regular.ttf") format("truetype"); > } > > #background { > position: relative; > > width: 802px; > height: 1134px; > padding: 12px; > transform-origin: 0px 0px; > transition-duration: 0ms; > transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); > } > > canvas { > position: absolute; > width: 802px; > height: 1134px; > z-index: 1; > border: 1px solid rgb(206, 208, 217); > } > > .text-layer { > position: absolute; > width: 802px; > height: 1134px; > > background-color: white; > > font-size: 2em; > font-family: "web-NanumGothic-Regular"; > word-break: break-word; > > z-index: 2; > } > </style> ></head> ><body style="margin: 0px; height: 100%;"> ><div style="position: absolute; background: #FFFFFF; width: 100%; overflow: hidden;"> > <div id="background"> > <canvas id="c" width="802" height="1134"></canvas> > <div class="text-layer"> > Safari 16 > </div> > </div> ></div> ><script> > function makeRandomText(length) { > var result = ''; > var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; > var charactersLength = characters.length; > for(let i = 0; i < length; i++ ) { > result += characters.charAt(Math.floor(Math.random() * charactersLength)); > } > return result; > } > > window.onload = function() { > const TEXT = 'NanumGothic-Regular: Web font'; > const repaint = 500; > > const scaleFactor = window.innerWidth / 802; > const backGround = document.getElementById('background'); > > let textLayer = document.querySelector('.text-layer'); > let canvas = document.getElementById('c'); > let context = canvas.getContext('2d'); > > context.fillStyle = "#000000"; > backGround.style.transform = `translate(0px, 0px) scale(${scaleFactor}) translateZ(0px)`; > > function loop() { > let positionTop = 0, lineHeight = 12; > > context.clearRect(0, 0, context.canvas.width, context.canvas.height); > > backGround.removeChild(textLayer); > backGround.removeChild(canvas); > > textLayer = document.createElement('div'); > textLayer.setAttribute('class', 'text-layer'); > textLayer.innerText = TEXT; > > canvas = document.createElement('canvas'); > canvas.width = 802; > canvas.height = 1134; > context = canvas.getContext('2d'); > > backGround.appendChild(canvas); > backGround.appendChild(textLayer); > > for(let i = 0; i < repaint; i++) { > let fontSize = Math.floor(Math.random() * 300) + 12; > context.font = `${fontSize}px web-NanumGothic-Regular`; > context.textAlign = 'left'; > context.textBaseline = 'middle'; > context.fillText(makeRandomText(1), 0, positionTop); > positionTop += lineHeight; > } > }; > > loop(); > > setInterval(loop, 1000); > } ></script> ></body> ></html>
Note You need to log in before you can comment on or make changes to this bug.