Cannot simultaneously change `transform: rotate(...)` and `border-radius`
Categories
(Core :: Graphics, defect)
Tracking
()
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)
- Attempt to change rotation via
transform: rotate(...)
andborder-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
Comment 1•4 years ago
|
||
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.
Comment 2•4 years ago
|
||
Bugbug thinks this bug should belong to this component, but please revert this change in case of error.
Comment 3•4 years ago
|
||
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.
Comment 4•4 years ago
|
||
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!
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
Comment 6•1 years ago
|
||
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.
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.
Description
•