Bug 237920 - REGRESSION (iOS 15.4 / r287669): Mobile app stopped working due to CSS / angular animation
Summary: REGRESSION (iOS 15.4 / r287669): Mobile app stopped working due to CSS / angu...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Animations (show other bugs)
Version: Safari 15
Hardware: iPhone / iPad iOS 15
: P1 Blocker
Assignee: Antoine Quint
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2022-03-15 14:27 PDT by Karthik
Modified: 2022-05-26 14:49 PDT (History)
15 users (show)

See Also:


Attachments
Sample App to reproduce issue (6.44 MB, application/zip)
2022-03-15 21:50 PDT, Karthik
no flags Details
iOS 15.4 - not working video with sample app (476.61 KB, video/mp4)
2022-03-15 22:14 PDT, Karthik
no flags Details
Patch (10.32 KB, patch)
2022-03-17 08:20 PDT, Antoine Quint
koivisto: review+
Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Karthik 2022-03-15 14:27:01 PDT
Our iOS mobile app has both native and wkwebview. Many of our critical features are using wkwebview.

We use angular framework for web content and below code snippet used for page navigation animation in web content. After iOS 15.4 release - CSS animation / page navigation stopped working and the same works fine in <=iOS 15.3. Currently all our customers are impacted with iOS 15.4 release and not able to access the critical functions. 

Can you hold iOS 15.4 release till we fix the issue ?


Below code breaks after iOS 15.4 release:

export const routeAnimation: AnimationTriggerMetadata[] = [
  trigger('routing', [
    state('*', style({
      backfaceVisibility: 'hidden',
      display: 'block',
      position: 'absolute',
      width: '100vw',
      height: '100vh',
      transform: 'translate3d(0,0,0)'
    })),
    // Page leaving toward left
    transition('void => backward', [
      style({
        transform: 'translate3d(-100%,0,0)',
        transition: 'ease-out'
      }),
      animate('195ms')
    ]),
    transition('backward => void', [
      animate('195ms', style({
        transform: 'translate3d(100%,0,0)',
        transition: 'ease-in'
      }))
    ]),
    // Page leaving toward right
    transition('void => forward', [
      style({
        transform: 'translate3d(100%,0,0)',
        transition: 'ease-in'
      }),
      animate('225ms')
    ]),
    transition('forward => void', [
      animate('225ms', style({
        transform: 'translate3d(-100%,0,0)',
        transition: 'ease-out'
      }))
    ]),
    // New page sliding in from bottom, (current page remain behind)
    transition('void => upward', [
      style({
        transform: 'translate3d(0,100%,0)',
        zIndex: 3
      }),
      animate('225ms', style({
        transform: 'translate3d(0,0,0)',
        transition: 'ease-in'
      }))
    ]),
    transition('upward => void', [
      style({
        transform: 'translate3d(0,0,0)',
        zIndex: 0
      }),
      animate('225ms', style({
        transform: 'translate3d(0,0,0)',
        transition: 'ease-out'
      }))
    ]),
    // New page sliding in from top, (current page remain behind)
    transition('void => downward', [
      style({
        transform: 'translate3d(0,-100%,0)',
        zIndex: 3
      }),
      animate('225ms', style({
        transform: 'translate3d(0,0,0)',
        transition: 'ease-in'
      }))
    ]),
    transition('downward => void', [
      style({
        transform: 'translate3d(0,0,0)',
        zIndex: 0
      }),
      animate('195ms', style({
        transform: 'translate3d(0,0,0)',
        transition: 'ease-out'
      }))
    ])
  ])
];
Comment 1 Karthik 2022-03-15 14:32:53 PDT
Citibank Asia Mobile app impacted.
Comment 2 Radar WebKit Bug Importer 2022-03-15 15:47:34 PDT
<rdar://problem/90335275>
Comment 3 Karthik 2022-03-15 21:50:13 PDT
Created attachment 454797 [details]
Sample App to reproduce issue

sample cordova app to replicate the issue
Comment 4 Karthik 2022-03-15 22:14:20 PDT
Created attachment 454798 [details]
iOS 15.4 - not working video with sample app

iOS 15.4 - not working video with sample app
Comment 5 Antoine Quint 2022-03-16 06:09:59 PDT
I'm trying to reproduce the issue, but am failing so far. This is my first time looking at Cordova, so I did this:

1. `sudo npm install -g cordova`
2. go to the directory of the sample app
3. `cordova run ios`

This ran a build and eventually opened the iOS Simulator but all I see is a completely white screen, no content resembling what is in the screen recording.

Karthik, could you provide more information about how to reproduce the issue? Ideally, if you could provide content that doesn't require Cordova at all, this would be great.
Comment 6 Karthik 2022-03-17 01:06:15 PDT
Please open the workspace via Xcode and run the build
Comment 7 Karthik 2022-03-17 01:10:33 PDT
Please open myApp.xcworkspace located at below path in XCode and directly run using Command + R.  No need of any additional setup or no need to run any additional commands.

Path to workspace: ./SampleApp/Native/myApp/platforms/ios/myApp.xcworkspace
Comment 8 Antoine Quint 2022-03-17 02:04:32 PDT
(In reply to Karthik from comment #7)
> Please open myApp.xcworkspace located at below path in XCode and directly
> run using Command + R.  No need of any additional setup or no need to run
> any additional commands.
> 
> Path to workspace: ./SampleApp/Native/myApp/platforms/ios/myApp.xcworkspace

I am getting the same results, a completely white screen.
Comment 9 Antoine Quint 2022-03-17 02:05:16 PDT
Oh, content did actually load after a bit, I can see the issue now. I expect there should be an animated transition as you navigate between the various sections.
Comment 10 Karthik 2022-03-17 02:13:16 PDT
Yes. Any solution to fix this?
Comment 11 Karthik 2022-03-17 02:15:50 PDT
if you check the same in <=iOS 15.3 - you will see animated transition
Comment 12 Antoine Quint 2022-03-17 03:23:23 PDT
Initial debugging indicates that no CSS Transition, CSS Animation or Web Animations is used at all.
Comment 13 Karthik 2022-03-17 04:00:24 PDT
thanks. Code has CSS transition/animation via angular. Same code works good in <= iOS 15.3
Comment 14 Antoine Quint 2022-03-17 06:10:11 PDT
I eventually got it to reproduce simply in Safari on macOS by going into myApp/platforms/ios/www/ to start a web server.
Comment 15 Antoine Quint 2022-03-17 07:07:50 PDT
This regressed with r287669.
Comment 16 Antoine Quint 2022-03-17 08:20:38 PDT
Created attachment 454975 [details]
Patch
Comment 17 EWS Watchlist 2022-03-17 08:22:08 PDT
This patch modifies the imported WPT tests. Please ensure that any changes on the tests (not coming from a WPT import) are exported to WPT. Please see https://trac.webkit.org/wiki/WPTExportProcess
Comment 18 Antoine Quint 2022-03-17 08:23:10 PDT
So the change in WPT output in r287669 actually called out the issue but since the result was a FAIL I did not give it the consideration it warranted. The patch adds dedicated tests that PASS now so this won't happen again.
Comment 19 Antoine Quint 2022-03-17 08:42:30 PDT
Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/33229
Comment 20 Karthik 2022-03-17 09:02:40 PDT
Thanks for review and making fix..

Any workaround available to add at our end to solve the issue timebeing?
When this fix expected in iOS 15.4.x?
Comment 21 Karthik 2022-03-17 10:07:12 PDT
Currently we are removing all animation based navigation in app and pushing to App Store. we have 17 countries app impacted across Citibank Asia.. 

Pls share if any workaround available
Comment 22 Antoine Quint 2022-03-17 10:37:59 PDT
(In reply to Karthik from comment #20)
> Thanks for review and making fix..
> 
> Any workaround available to add at our end to solve the issue timebeing?

I didn't study your code thoroughly but I can tell you what the issue in WebKit was. If an element did not have any value set for `transition` or `animation`, getting the computed style for these properties would return an empty string instead of the default computed value for these properties.

So any code you have that reads back from `getComputedStyle(element).transition` will be buggy in this release.

> When this fix expected in iOS 15.4.x?

We don't comment on future releases, but the severity of the issue is noted and we account for such things when planning what bug fixes to take.
Comment 23 Antoine Quint 2022-03-17 10:45:05 PDT
Committed r291420 (?): <https://commits.webkit.org/r291420>
Comment 24 Karthik 2022-03-19 06:15:05 PDT
Thanks. We have tested below approach and animation works fine in both iOS 15.3 and iOS 15.4. Hope no break with webkit patch in subsequent webkit release?

We just replaced transition with transitionTimingFunction

From :
   transition('void => backward', [
      style({
        transform: 'translate3d(-100%,0,0)',
        transition: 'ease-out'
      }),
      animate('195ms')
    ]),

TO:

   transition('void => backward', [
      style({
        transform: 'translate3d(-100%,0,0)',
        transitionTimingFunction : 'ease-out'
      }),
      animate('195ms')
    ]),
Comment 25 Brent Fulgham 2022-05-26 14:49:44 PDT
This fix shipped with Safari 15.5 (all platforms).