ng2-pdf-viewer breaks Angular animation for safari on iOS

[ElBart00]

ng2-pdf-viewer breaks the Angular animations only on Safari on iOS. Safari on OS X works fine. Chrome, IE and Firefox work fine as well.
See plunker https://plnkr.co/edit/1EGqrMHVoinzYclltxmH?p=preview.
This plunk just has a simple animation and a ng2-pdf-viewer. When you click the step button the colored div slides to the left and a counter below the div is updated. This works as expected except in Safari on iOS. It loads, but as soon a transition is started, angular just stops without any error. When you remove the transitions and leave the states in it is working again but your'e not able to use transitions. When you remove the ng2-pdf-viewer the animations with transitions work on Safari on iOS.

Another user experiencing this problem: https://stackoverflow.com/a/45849701

[javierdpt]

Same thing happening to me. I had to remove all the animations because it breaks the entire app.

[cbjerg]

Having the exact same problem

[tpmconzentrate]

We are experiencing the same issue.

The issue may be with pdfjs:
We have tried moving pdfjs-dist from a lazy loaded webpack bundle into our vendor bundle that will be loaded initially. When doing this Angular animations break.

Also - when using functionality that lazy-loads pdfjs-dist animations break.

Update: After further investigation the issue seems to stem from pdfjs overwriting window.requestAnimationFrame and window.cancelAnimationFrame on iOS as hinted in this thread.

The offending lines are here. The source states that

requestAnimationFrame on iOS is broken, replacing with fake one.

I am not sure what about requestAnimationFrame on iOS that may be broken but it's been supported since iOS 6.

[txinfo]

@tpmconzentrate Did you find a solution for this issue?

[txinfo]

It looks like pdf.js fixed this issue with their 2.x branch but it is still present in 1.x which is what ng2-pdf-viewer is packaged with. I made my own fork of pdfjs-dist with the requestAnimationFrame polyfill
for iOS removed and shrinkwrapped it into ng2-pdf-viewer and the problem disappeared.

[TheDuc]

I also have this exact problem.
The comment above did help me a lot, I shrinkwrapped pdfjs version 2.0.288, but I also had to remove
require('pdfjs-dist/web/compatibility')
from ng2-pdf-viewer to make it work, because in the new version of pdfjs the compatibility.js file does not exist anymore. I am not sure if this is a correct fix, but it works for me for now.

[artdias90]

Any updates on this issue?

[VadimDez]

@artdias90 yes, have you tried latest version 5.0.1 https://github.com/VadimDez/ng2-pdf-viewer/releases/tag/5.0.1

[artdias90]

@VadimDez yes thanks! I had hardcoded V4 sorry. I think we should close this

[VadimDez]

Fixed in version 5.0.1 https://github.com/VadimDez/ng2-pdf-viewer/releases/tag/5.0.1