Bug 158184
| Summary: | CSS Transitions don't occur when parent elements lose/gain "display: flex" | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | xymostech |
| Component: | Animations | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED CONFIGURATION CHANGED | ||
| Severity: | Normal | CC: | dino, graouts, webkit, xymostech |
| Priority: | P2 | ||
| Version: | Safari 9 | ||
| Hardware: | Mac | ||
| OS: | OS X 10.10 | ||
xymostech
Example URL:
https://jsbin.com/zekeko/edit
Steps to reproduce the problem:
1. Make a container with display: flex
2. Add a CSS transition property to children of the container
3. Attempt to trigger the transition at the same time as removing display: flex from the container
What is the expected behavior?
The CSS transitions should happen.
What went wrong?
The transitions don't occur; instead, the style updates immediately.
Also occurs in Chrome. Reported at https://bugs.chromium.org/p/chromium/issues/detail?id=615653#
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Antoine Quint
The reported URL shows an opacity animation in all of Safari 16, Chrome and Firefox. I believe this is now working as expected, closing as such.