[Webkit-unassigned] [Bug 246074] [iOS 16.0 Safari] When fill text on canvas with web font, it refreshes or disappears.

Thu Oct 6 23:40:55 PDT 2022

https://bugs.webkit.org/show_bug.cgi?id=246074

--- Comment #5 from INHO <ihyeom at m2soft.co.kr> ---
Comment on attachment 462860
  --> https://bugs.webkit.org/attachment.cgi?id=462860
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>

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20221007/7c5e7553/attachment.htm>