| Summary: | REGRESSION (iOS 16): Flickering horizontal lines on the animation made with canvas | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Pawel <p.stanecki93> | ||||||
| Component: | Canvas | Assignee: | Nobody <webkit-unassigned> | ||||||
| Status: | NEW --- | ||||||||
| Severity: | Major | CC: | ap, dino, heycam, p.stanecki93, sabouhallawa, tinam45363, webkit-bug-importer | ||||||
| Priority: | P2 | Keywords: | CanvaBug, InRadar | ||||||
| Version: | Other | ||||||||
| Hardware: | iPhone / iPad | ||||||||
| OS: | iOS 16 | ||||||||
| See Also: | https://bugs.webkit.org/show_bug.cgi?id=248946 | ||||||||
| Attachments: |
|
||||||||
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 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. 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 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. (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/ Created attachment 462734 [details]
test case
Same test as attachment
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?) 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? 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. I can reproduce on iPhone 14 Pro, iOS 16.1 beta. 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? |
Created attachment 462383 [details] Animation with flickering lines In the device with iOS 16 there are some strange horizontal lines flickering during the animation.