Bug 237918 - REGRESSION(iOS 15.4): threejs experiencing critical performance issues (flickering, rendering problems)
Summary: REGRESSION(iOS 15.4): threejs experiencing critical performance issues (flick...
Status: RESOLVED DUPLICATE of bug 237113
Alias: None
Product: WebKit
Classification: Unclassified
Component: WebGL (show other bugs)
Version: Safari 15
Hardware: iPhone / iPad iOS 15
: P1 Critical
Assignee: Nobody
URL:
Keywords: InRadar, Performance, PerfRegression
Depends on:
Blocks:
 
Reported: 2022-03-15 13:49 PDT by Anna from Mapbox
Modified: 2022-05-26 15:03 PDT (History)
7 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Anna from Mapbox 2022-03-15 13:49:54 PDT
I work on Mapbox GL-JS. We manually test with new versions of Safari and came across severe performance issues (constant flickering and rendering issues) with one of our tests that uses threejs to place a 3d model on one of our maps when I updated to iOS 15.4 (on iPhone 12 Pro). I did not experience performance issues prior to this upgrade. Have also tested with iPhone 11 with iOS 14.6, iPhone 12 with 15.1 and on Macbook Pro with Monterey 12.3 which all performed as expected.  I discovered this decline in performance with Webkit today and downloaded iOS 15.4 yesterday on iPhone 12 Pro.

See the code reproduction here: https://jsbin.com/mojuyosenu/edit?html,css,js,output  You can see immediate performance issues when zooming or panning the map. I expect to not see flickering in the sky or terrain, and should have smooth zooming/panning experience as it worked before iOS 15.4.
Comment 1 Radar WebKit Bug Importer 2022-03-15 15:11:05 PDT
<rdar://problem/90333223>
Comment 2 Anna from Mapbox 2022-03-16 10:51:34 PDT
Is there a follow up on this issue? Do you need more information on our end? updating to iOS 15.4 causes threejs to be unusable. Thank you!
Comment 3 Kenneth Russell 2022-03-16 11:36:11 PDT
Personally I don't have the hardware to test this, but I wonder whether this is a problem with multisampled rendering results being lost during blitFramebuffer resolution, fixed in Bug 237113 but which I think missed 15.4.
Comment 4 Anna from Mapbox 2022-03-16 11:46:14 PDT
(In reply to Kenneth Russell from comment #3)
> Personally I don't have the hardware to test this, but I wonder whether this
> is a problem with multisampled rendering results being lost during
> blitFramebuffer resolution, fixed in Bug 237113 but which I think missed
> 15.4.

It should be reproducible in any iOS device with 15.4 installed. Thanks for the follow-up!
Comment 5 em_te 2022-03-16 21:04:28 PDT
I'm experiencing a flickering bug after upgrading to the latest iOS 15.4 on Mobile Safari.

Click on the box to trigger the "hover" transition. On old Safari the box grows and darkens as intended. After the 15.4 update, the animation does a flicker at the end of the transition.

https://jsbin.com/poyafawore/edit?css,output
Comment 6 Anna from Mapbox 2022-03-17 08:15:50 PDT
(In reply to Kenneth Russell from comment #3)
> I wonder whether this
> is a problem with multisampled rendering results being lost during
> blitFramebuffer resolution, fixed in Bug 237113 but which I think missed
> 15.4.

We think this problem could be related. Is there a iOS 15.4.1 beta with this fix  that I can test on my iPhone? Do you know when a patch may be released containing this fix? Thanks again!
Comment 7 Kyle Piddington 2022-03-17 16:06:54 PDT
Hi Anna, I can reproduce your issues on iOS 15.4, and that that after applying the patch athttps://bugs.webkit.org/show_bug.cgi?id=237113 I'm no longer observing flickering and rendering issues. 

(In reply to em_te from comment #5)
> I'm experiencing a flickering bug after upgrading to the latest iOS 15.4 on
> Mobile Safari.
> 
> Click on the box to trigger the "hover" transition. On old Safari the box
> grows and darkens as intended. After the 15.4 update, the animation does a
> flicker at the end of the transition.
> 
> https://jsbin.com/poyafawore/edit?css,output

Em_te, this appears to be a different issue, unfortunately. https://bugs.webkit.org/show_bug.cgi?id=211986 seems more similar to what you're experiencing.

Specifically, I've found the opacity of your element appears to incorrectly 'snap' back to the original opacity, and then immediately transition to the final opacity  once the timer is finished. This issue is very prominent if you set the scale transform to 100ms, instead of 1000. Can you open a new bug for this?
Comment 8 em_te 2022-03-17 23:55:17 PDT
> Specifically, I've found the opacity of your element appears to incorrectly
> 'snap' back to the original opacity, and then immediately transition to the
> final opacity  once the timer is finished. This issue is very prominent if
> you set the scale transform to 100ms, instead of 1000. Can you open a new
> bug for this?

I've opened a new bug 238067
Comment 9 Kimmo Kinnunen 2022-03-22 02:15:56 PDT
Thank you for the report.
Marking this as duplicate as per Kyle's confirmation. For discussion, please follow to the original bug.

*** This bug has been marked as a duplicate of bug 237113 ***
Comment 10 Brent Fulgham 2022-05-26 15:03:05 PDT
This fix shipped with Safari 15.5 (all platforms).