Bug 245264 – REGRESSION (iOS 16): Flickering horizontal lines on the animation made with canvas

• Component: Canvas
• Status: NEW

[Pawel]

Created attachment 462383 [details]
Animation with flickering lines

In the device with iOS 16 there are some strange horizontal lines flickering during the animation.

[Pawel]

It happens only when the app is opened on the device with iOS 16. 

When I was testing it, I noticed that when I remove the gradient from the animation waves these flickering lines disappear.

I posted question also on stackoverflow where you can see the code: https://stackoverflow.com/questions/73733470/flickering-horizontal-lines-on-the-animation-made-with-canvas-only-on-ios-16

[Alexey Proskuryakov]

Could you please attach a full self-contained reproducible case here? Not sure if it's practical for us to reassemble from the stackoverflow discussion.

[Pawel]

I created a blank ionic tab app and added the animation there

Here you can open the app with the animation on the browser: https://3qohtbmn4j.appflowapp.com/tabs/tab1

I already did that and on my iPhone 13 pro(iOS 16) these flickering horizontal lines appear.

Here is the GitHub repo: https://github.com/kendyl93/bugzilla-245264/tree/master/src/app/explore-container

[Radar WebKit Bug Importer]

<rdar://problem/100312374>

[Alexey Proskuryakov]

I'm getting "An error occurred (AccessDenied) when calling the GetObject operation: Access Denied" from the live URL. And a 404 error from GitHub (it would almost certainly be impractical for us to build from a repo though).

Would it be possible for you to attach an .html test case here? Something like JSFiddle would be OK too.

[Pawel]

(In reply to Alexey Proskuryakov from comment #5)
> I'm getting "An error occurred (AccessDenied) when calling the GetObject
> operation: Access Denied" from the live URL. And a 404 error from GitHub (it
> would almost certainly be impractical for us to build from a repo though).
> 
> Would it be possible for you to attach an .html test case here? Something
> like JSFiddle would be OK too.

Here is the JSFiddle with clean animation.
https://jsfiddle.net/kendyl93/fr671hux/257/

[Alexey Proskuryakov]

Created attachment 462734 [details]
test case

Same test as attachment

[Alexey Proskuryakov]

Thank you! 

I cannot reproduce with this test case on iPhone 14 Pro, iOS 16.1 beta, portrait or landscape.

We'll need someone with an iPhone 13 mini to take a look. But please feel encouraged to share your results (does this reproduce with the attached test for you? Does this still reproduce with iOS 16.1 beta?)

[Said Abou-Hallawa]

I can't repro it either. 

Also the attached test case renders different from the attached animated image. Can you please attach the page which you used to generate the animated image?

[Pawel]

Thanks for a quick answer. 

Seems that in this test case I am also not able to reproduce that. However, on the ionic build, it is happening. 

Check the preview here(it is only available for 7 days because if the free plan limitation) https://dashboard.ionicframework.com/preview/464a51ac/0qtqtrjf3a

Maybe it's an ionic issue with iOS 16 so I need to report it on their repo.

[Alexey Proskuryakov]

I can reproduce on iPhone 14 Pro, iOS 16.1 beta.

[Cameron McCormack (:heycam)]

Hi Pawel, sorry about the delay getting back to this. I cannot reproduce with the attachment here, and obviously the Ionic link has expired since you posted it. Is this still something you can reproduce?