| 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 Rendering | Assignee: | 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
INHO
2022-10-05 02:19:45 PDT
This is the capture of the problem: http://fs.m2soft.co.kr/report2/test/bug.jpg 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.
Created attachment 462860 [details]
html including javascript code for bugs
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> |
