| Summary: | flex-basis wont transition if a value is percentage | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | rhys |
| Component: | Animations | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW --- | ||
| Severity: | Normal | CC: | dino, graouts, graouts, simon.fraser, webkit-bug-importer, zalan |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari 15 | ||
| Hardware: | Unspecified | ||
| OS: | macOS 12 | ||
Thanks for filing this report. Could you write a complete testcase that shows the regression here? Could you also check with Safari Technology Preview if you can still reproduce the issue? I've attempted to write a simple demo that transitions flex-basis from a percentage value to a px value and it worked fine for me. |
MacOs 12.2.1 (safari 15.3) / iPad OS 15.0 Percentages in flex-basis cause transition to stop working. The following used to work and still does on other browsers: ``` div { flex-basis: min(200px, 33%); transition: all ease-out .25s; } div:hover { flex-basis: 300px; } ``` The problem isn't with using min because: The following also doesnt work: ``` div { flex-basis: 33%; transition: all ease-out .25s; } div:hover { flex-basis: 300px; } ``` While this does: ``` div { flex-basis: flex-basis: min(200px,500px); transition: all ease-out .25s; } div:hover { flex-basis: 300px; } ``` Also using the 1st example and width instead of flex-basis transitions fine even tho the min contains a percentage