Closed Bug 1667788 Opened 4 years ago Closed 1 years ago

Cannot simultaneously change `transform: rotate(...)` and `border-radius`

Categories

(Core :: Graphics, defect)

Firefox 81
defect

Tracking

()

RESOLVED WORKSFORME

People

(Reporter: ben, Unassigned)

Details

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:80.0) Gecko/20100101 Firefox/80.0

Steps to reproduce:

(Cross posting from https://github.com/framer/motion/issues/367, tester verified bug is present across multiple libraries in FF 81.0b7)

  1. Attempt to change rotation via transform: rotate(...) and border-radius in the same animation frame

Original motivating example: https://codesandbox.io/s/framer-motion-keyframes-ekks8?fontsize=14&module=%2Fsrc%2FExample.tsx

Gif capture in case you would prefer not to open codesandbox: https://user-images.githubusercontent.com/4683658/67062299-7f67b680-f128-11e9-85f6-20d3598c2d8b.gif

Actual results:

Border radius is not applied correctly during animation. Rounded rectangle being rotated jumps abruptly between 20% radius and 50% radius.

Expected results:

Both rotation and border radius should have changed smoothly

I’ve managed to recreate with multiple JavaScript animation libraries including Framer Motion and Anime.js. I think this occurs if the element has any rotation.

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Component: Untriaged → CSS Transitions and Animations
Product: Firefox → Core

Moving this to Graphics since it doesn't use any CSS transitions/animations (or Web Animations either).

FWIW, I can't reproduce it on Nightly on Windows 10. I see the same result as in Chrome.

Component: CSS Transitions and Animations → Graphics

I also see the same thing in Firefox and in Chrome, when it zooms in it is a circle and when it zooms out it is a rounded rect.

Could you attach your about:support? And would you be able to try finding a regression window using mozregression since we are having trouble reproducing (in the event it is a regression)? Thanks!

https://mozilla.github.io/mozregression/quickstart.html

Flags: needinfo?(ben)

Yes I will be able to do those things, though it may be at least a few days as we are in the middle of moving house currently.

In case mattgperry can respond sooner I will tag them also

Flags: needinfo?(mattgperry)

Redirect needinfos that are pending on inactive users to the triage owner.
:bhood, since the bug doesn't have a severity set, could you please set the severity or close the bug?

For more information, please visit BugBot documentation.

Flags: needinfo?(mattgperry)
Flags: needinfo?(bhood)
Flags: needinfo?(ben)

I think this bug is fixed. Apologies I never got around to further testing.

Using Firefox 113.0.2, I have just now tried the CodeSandbox example, and the behavior is now correct. Per the Github issue comments, it seems a fix may have been present in nightlies as soon as a couple of days after the bug report.

Status: UNCONFIRMED → RESOLVED
Closed: 1 years ago
Resolution: --- → WORKSFORME

Thanks for following up, Ben. :)

Flags: needinfo?(bhood)
You need to log in before you can comment on or make changes to this bug.