Bug 218702 - Strange HTML Canvas rendering problem on iOS 14 - as seen on iPhone 8
Summary: Strange HTML Canvas rendering problem on iOS 14 - as seen on iPhone 8
Status: RESOLVED MOVED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Canvas (show other bugs)
Version: Safari 14
Hardware: iPhone / iPad Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2020-11-09 02:52 PST by emish89
Modified: 2020-11-09 11:57 PST (History)
5 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
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.