[Webkit-unassigned] [Bug 237920] New: iOS 15.4 - Mobile app stopped working due to CSS /angular animation.

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=237920

            Bug ID: 237920
           Summary: iOS 15.4 - Mobile app stopped working due to CSS
                    /angular animation.
           Product: WebKit
           Version: Safari 15
          Hardware: iPhone / iPad
                OS: iOS 15
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Animations
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: karthikeyan.velayudam at citi.com
                CC: dino at apple.com, graouts at apple.com

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

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20220315/9eaad9d3/attachment-0001.htm>