REGRESSION (iOS 15.4 / r287669): Mobile app stopped working due to CSS / angular animation

[Karthik]

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'
      }))
    ])
  ])
];

[Karthik]

Citibank Asia Mobile app impacted.

[Radar WebKit Bug Importer]

<rdar://problem/90335275>

[Karthik]

Created attachment 454797 [details]
Sample App to reproduce issue

sample cordova app to replicate the issue

[Karthik]

Created attachment 454798 [details]
iOS 15.4 - not working video with sample app

iOS 15.4 - not working video with sample app

[Antoine Quint]

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.

[Karthik]

Please open the workspace via Xcode and run the build

[Karthik]

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

[Antoine Quint]

(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.

[Antoine Quint]

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.

[Karthik]

Yes. Any solution to fix this?

[Karthik]

if you check the same in <=iOS 15.3 - you will see animated transition

[Antoine Quint]

Initial debugging indicates that no CSS Transition, CSS Animation or Web Animations is used at all.

[Karthik]

thanks. Code has CSS transition/animation via angular. Same code works good in <= iOS 15.3

[Antoine Quint]

I eventually got it to reproduce simply in Safari on macOS by going into myApp/platforms/ios/www/ to start a web server.

[Antoine Quint]

This regressed with r287669.

[Antoine Quint]

Created attachment 454975 [details]
Patch

[EWS Watchlist]

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

[Antoine Quint]

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.

[Antoine Quint]

Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/33229

[Karthik]

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?

[Karthik]

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

[Antoine Quint]

(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.

[Antoine Quint]

Committed r291420 (?): <https://commits.webkit.org/r291420>

[Karthik]

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')
    ]),

[Brent Fulgham]

This fix shipped with Safari 15.5 (all platforms).