getAnimationStyle causes exceptions in older browsers

[janousek]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

Errors are thrown during collection of animation styles (in older browsers).
The problem is on this line:

angular/packages/animations/browser/src/render/css_keyframes/element_animation_style_handler.ts

Line 137 in 13cb75d

return element.style[ANIMATION_PROP + name];

Most of browsers will return empty string if the style property is not set. But some browsers (like Chrome on Android 4.4) returns null instead of empty string.
Several string functions are applied on the output of the method "getAnimationStyle" - like trim, split, indexOf, etc... But if the output of the"getAnimationStyle" is null, exception is thrown.

Simple fix of this bug:

  return element.style[ANIMATION_PROP + name] || '';

Expected behavior

Animation should work without errors.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

Angular version: 6.0.3


Browser:
- [ ] Chrome (desktop) version XX
- [X] Chrome (Android) version 34
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

[omieliekh]

Any progress on this issue? It now causes issues with PhantomJS tests

[janousek]

It seems that no one cares about this issue. My temporary solution/workaround to prevent errors, looks like this:

@Component({
  ....
})
class AppComponent {

	@HostBinding('@.disabled')
	public disableAnimations = document.createElement('div').style['animation'] == null;
  
  .....
}

This will disable animations in problematic browsers.

[omieliekh]

@janousek I've solved issue on my side with a polyfill, added this code to src/polyfills.ts

if (document.body.style.animation === undefined && CSSStyleDeclaration) {
  CSSStyleDeclaration.prototype.animation = '';
}
if (document.body.style['animation-name'] === undefined && CSSStyleDeclaration) {
  CSSStyleDeclaration.prototype['animation-name'] = '';
  CSSStyleDeclaration.prototype['animationName'] = '';
}
if (document.body.style['animation-duration'] === undefined && CSSStyleDeclaration) {
  CSSStyleDeclaration.prototype['animation-duration'] = '';
  CSSStyleDeclaration.prototype['animationDuration'] = '';
}
if (document.body.style['animation-play-state'] === undefined && CSSStyleDeclaration) {
  CSSStyleDeclaration.prototype['animation-play-state'] = '';
  CSSStyleDeclaration.prototype['animationPlayState'] = '';
}

Only the last one (with animationPlayState) is fixing my issue, but I've added few more to be more future-proof

[ghernandez81]

@janousek i fixed my issue with using NoopAnimationsModule in my unit-test

[pedep]

I think you can get pretty far by adding some vendor prefix checks at these 2 points

angular/packages/animations/browser/src/render/css_keyframes/css_keyframes_driver.ts

Line 43 in 6482f6f

let keyframeStr = `@keyframes ${name} {\n`;

angular/packages/animations/browser/src/render/css_keyframes/element_animation_style_handler.ts

Line 9 in cf0968f

const ANIMATION_PROP = 'animation';

maybe simply something like this?

function vendorPrefix() {
  return ['', '-webkit-', '-moz-', '-o-'].find((prefix) =>
    document.body.style[prefix+'animation'] !== undefined || ''
  )
}

// [...]
let keyframeStr = `@${vendorPrefix()}keyframes ${name} {\n`; 
// [...]
const ANIMATION_PROP = vendorPrefix()+'animation'; 

This approach requires calls to setAnimationStyle to use the lowercase-dashes version of the css properties

angular/packages/animations/browser/src/render/css_keyframes/element_animation_style_handler.ts

Line 43 in cf0968f

setAnimationStyle(this._element, 'Delay', `-${this._position}ms`, index);

angular/packages/animations/browser/src/render/css_keyframes/element_animation_style_handler.ts

Line 75 in cf0968f

setAnimationStyle(element, 'PlayState', status, index);

Thoughts?

[Brandinga]

have the same problem:

• TypeError: Cannot call method 'split' of undefined
• TypeError: Cannot call method 'trim' of undefined

Errors on the following User-Agents:

1. Mozilla/5.0 (Linux; Android 4.4.2; Doro Liberto 820 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/30.0.0.0 Mobile Safari/537.36
2. Mozilla/5.0 (Linux; Android 4.4.2; de-de; SAMSUNG GT-I9301I Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Version/1.5 Chrome/28.0.1500.94 Mobile Safari/537.36
3. Mozilla/5.0 (Linux; U; Android 4.4.4; de-at; GT-I9060I Build/KTU84P) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
4. MT6582_TD/V1 Linux/3.4.67 Android/4.4.2 Release/ Browser/AppleWebKit537.36 Chrome/30.0.0.0 Mobile Safari/537.36 System/Android 4.4.2

FYI duplicate issue #25563

[RostyslavVolytskyi]

@omieliekh your solution will break angular material dropdowns in Safari.

[dottodot]

Is there still no fix for this?

[BojanKogoj]

There is a pull request opened (#29709), but nothing has been done about it.

@matsko any chance this will be merged?

[pascaliske]

This error also seems to occur in Chrome 70 on Windows 10 because I just got the same error message in my client's Angular app through Sentry: https://sentry.io/share/issue/8c7da85210424e63b96c8f7a10bc9435/

[vlaco]

Is there any hope for this being solved soon?

[danwhitston]

So, this has been blowing up our Sentry logging, and it's an absolutely tiny fix with a PR that has no chance of causing issues, and has been sitting in the queue forever. Seems unfortunate that it's taken over 2 years and several conversations to fail to change a single reference.

[petebacondarwin]

@danwhitston - sorry that this has not yet been solved. Now that @matsko has left the team, such issues are not getting as much attention as they deserve. Are you able to test the fix given in #29709 for your scenario? If it works for you, I would be willing to try to get it merged.

[AndrewKushnir]

Closing this issue since corresponding PR #29709 was merged and should be available in the next Angular release (v11.0.3). Thank you.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}