Bug 218702

Summary:	Strange HTML Canvas rendering problem on iOS 14 - as seen on iPhone 8
Product:	WebKit	Reporter:	emish89 <federico.ballarini.sc>
Component:	Canvas	Assignee:	Nobody <webkit-unassigned>
Status:	RESOLVED MOVED
Severity:	Normal	CC:	dino, simon.fraser, smoley, webkit-bug-importer, zalan
Priority:	P2	Keywords:	InRadar
Version:	Safari 14
Hardware:	iPhone / iPad
OS:	Unspecified

Description emish89 2020-11-09 02:52:30 PST

I have a strange rendering problem on a simple donut chart "hand made" with HTML Canvas. It started from iOS14 and I can see it on my iPhone 8.

I don't know if any other device has this problem, from chrome dev tools and from iPhone 11 Pro simulator I didn't.

https://codepen.io/emish89/pen/bGemWKN


I attach a pen where I created the situation with the problem. If the value (first line in JS) is higher than 75 you start to see strange glitches. (images below)

I tested it and seems related to the circleRadius property, under 78 you don't have the problem in my particular case.

I don't know if is something wrong in my code that I don't understand (but it worked fine for years) or something else.

Thanks a lot for all the contributions.


For references and images: https://stackoverflow.com/questions/64748140/strange-html-canvas-rendering-problem-on-ios-14-as-seen-on-iphone-8

Comment 1 Smoley 2020-11-09 10:52:09 PST

Thanks for filing, I can reproduce this by setting const value = 90;

Does not reproduce on iOS 13.6.1, regressed in 14.0. Still reproduces on 14.2.

Comment 2 Radar WebKit Bug Importer 2020-11-09 10:59:29 PST

<rdar://problem/71199552>

Comment 3 Simon Fraser (smfr) 2020-11-09 11:57:11 PST

This is a bug in an underlying framework.