Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

useAnimation ignores certain style declarations on browsers that don't support WebAnimations #25635

Closed
JohnKis opened this Issue Aug 23, 2018 · 1 comment

Comments

Projects
None yet
2 participants
@JohnKis
Copy link

JohnKis commented Aug 23, 2018

I'm submitting a...


[x] 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

Certain style definitions (like 'position', 'top', 'right' etc could be others as well) in reusable animations are ignored on browsers that don't support WebAnimations. This used to work fine in Angular 5 and earlier where the web animation polyfill was used. Interestingly, they work fine if defined directly on the transition - in a non reusable manner.

Expected behavior

Styles in reusable animations should work fine in all browsers, as it used to in Angular 5 and earlier.

Minimal reproduction of the problem with instructions

  • Open the StackBlitz example both in Chrome and another browser that doesn't support WebAnimations.
  • Click on the rectangle.
  • Observe that it turns green in both browsers however it only applies the position and right properties in Chrome.

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

To be able use reusable animations properly regardless of the browser.

Environment


Angular version: 6.1.1


Browser:
- [x] Chrome (desktop) version 68
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [x] Safari (desktop) version 11.1.2
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: v8.9.4
- Platform: Mac

Others:

@matsko

This comment has been minimized.

Copy link
Member

matsko commented Jan 8, 2019

Alright I finally got to look at this. Turns out that position values are not understood by CSS keyframe animations. Safari (and perhaps all other non-web-animations browsers) full-out ignore position inside of the animation itself. This is why CSS properties such as right are ignored.

The fix here should be that the angular animation code should place position outside of the animation def and use it as a regular style for the duration of the animation.

matsko added a commit to matsko/angular that referenced this issue Feb 21, 2019

fix(animations): ensure `position` and `display` styles are handled o…
…utside of

keyframes/web-animations

When web-animations and/or CSS keyframes are used for animations certain
CSS style values (such as `display` and `position`) may be ignored by a
keyframe-based animation. Angular should special-case these styles to
ensure that they get applied as inline styles throughout the duration of
the animation.

Closes angular#24923
Closes angular#25635

Jira Issue: FW-1091
Jira Issue: FW-1092

matsko added a commit to matsko/angular that referenced this issue Feb 21, 2019

fix(animations): ensure `position` and `display` styles are handled o…
…utside of keyframes/web-animations

When web-animations and/or CSS keyframes are used for animations certain
CSS style values (such as `display` and `position`) may be ignored by a
keyframe-based animation. Angular should special-case these styles to
ensure that they get applied as inline styles throughout the duration of
the animation.

Closes angular#24923
Closes angular#25635

Jira Issue: FW-1091
Jira Issue: FW-1092

matsko added a commit to matsko/angular that referenced this issue Feb 22, 2019

fix(animations): ensure `position` and `display` styles are handled o…
…utside of keyframes/web-animations

When web-animations and/or CSS keyframes are used for animations certain
CSS style values (such as `display` and `position`) may be ignored by a
keyframe-based animation. Angular should special-case these styles to
ensure that they get applied as inline styles throughout the duration of
the animation.

Closes angular#24923
Closes angular#25635

Jira Issue: FW-1091
Jira Issue: FW-1092

matsko added a commit to matsko/angular that referenced this issue Feb 25, 2019

fix(animations): ensure `position` and `display` styles are handled o…
…utside of keyframes/web-animations

When web-animations and/or CSS keyframes are used for animations certain
CSS style values (such as `display` and `position`) may be ignored by a
keyframe-based animation. Angular should special-case these styles to
ensure that they get applied as inline styles throughout the duration of
the animation.

Closes angular#24923
Closes angular#25635

Jira Issue: FW-1091
Jira Issue: FW-1092

matsko added a commit to matsko/angular that referenced this issue Feb 25, 2019

fix(animations): ensure `position` and `display` styles are handled o…
…utside of keyframes/web-animations

When web-animations and/or CSS keyframes are used for animations certain
CSS style values (such as `display` and `position`) may be ignored by a
keyframe-based animation. Angular should special-case these styles to
ensure that they get applied as inline styles throughout the duration of
the animation.

Closes angular#24923
Closes angular#25635

Jira Issue: FW-1091
Jira Issue: FW-1092

matsko added a commit to matsko/angular that referenced this issue Feb 26, 2019

fix(animations): ensure `position` and `display` styles are handled o…
…utside of keyframes/web-animations

When web-animations and/or CSS keyframes are used for animations certain
CSS style values (such as `display` and `position`) may be ignored by a
keyframe-based animation. Angular should special-case these styles to
ensure that they get applied as inline styles throughout the duration of
the animation.

Closes angular#24923
Closes angular#25635

Jira Issue: FW-1091
Jira Issue: FW-1092

@benlesh benlesh closed this in a6ae759 Feb 27, 2019

benlesh added a commit that referenced this issue Feb 27, 2019

fix(animations): ensure `position` and `display` styles are handled o…
…utside of keyframes/web-animations (#28911)

When web-animations and/or CSS keyframes are used for animations certain
CSS style values (such as `display` and `position`) may be ignored by a
keyframe-based animation. Angular should special-case these styles to
ensure that they get applied as inline styles throughout the duration of
the animation.

Closes #24923
Closes #25635

Jira Issue: FW-1091
Jira Issue: FW-1092

PR Close #28911
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.