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.

Sign up for GitHub

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

Jump to bottom

FLIP Animations janky; inside a parent with transform:scale() #3555

Closed
simeydotme opened this issue Sep 12, 2019 · 2 comments · Fixed by #3627
Closed

FLIP Animations janky; inside a parent with transform:scale() #3555

simeydotme opened this issue Sep 12, 2019 · 2 comments · Fixed by #3627
Labels
bug

Comments

@simeydotme
Copy link
Contributor

Problem

When running FLIP animations on a list, if that list is inside of a parent with transform: scale(); set to anything other than 1, it seems that the First position gets calculated wrongly and causes janky animations.

Here's a reduced test case of the issue.

Reproduction Steps

  1. Produce a FLIP animation list
  2. Use transform: scale() on the list parent

Test Case

Please note that the scale value could be anything, but the problem's apparentness scales linearly with the scale value; if it's <1 then the animation begins compressed, and if it's >1 then animation begins stretched.

eg: if scale == 0.99 it's barely noticeable. if scale == 0.1 it's exaggerated.

Expected behavior

I would expect that the FLIP animation can perform on an list which is scaled.

Logs

no error logs

Stacktraces

none

Environment

  • Chrome 76.0.3x
  • Mac OSX Sierra 10.12
  • Svelte 3.12.1
  • REPL

Severity

Low ... I can't imagine this is a common use case. But I also imagine it's simply a calculation oversight which could be resolved by multiplying the distance * scale

Additional context

My own use-case is an Article Editor, and the article is scaled when editing for a better view of the content. But when the user edits anything, the animations get all wonky.
@simeydotme simeydotme changed the title FLIP Animations inside a parent with transform:scale() FLIP Animations janky; inside a parent with transform:scale() Sep 12, 2019
@Conduitry Conduitry added the bug label Sep 12, 2019
simeydotme added a commit to simeydotme/svelte that referenced this issue Sep 24, 2019
@simeydotme
Calculate scale factor of elements in FLIP animations
7c0ee7b 
- divide the `getBoundingClientRect` dimensions by the `clientHeight` or
`clientWidth`
	- this gives us the element's scaled values as `scaleX` and
`scaleY`
- divide the `dx` and `dy by the `scaleX` and `scaleY`

This aims to fix sveltejs#3555 by using the `node`'s un-scaled width/height to
calculate the amount it has been scaled. Then dividing the distance by
this scale factor removes the janky start position which was shown in
the test case.

resolves sveltejs#3555
simeydotme added a commit to simeydotme/svelte that referenced this issue Sep 24, 2019
@simeydotme
Calculate scale factor of elements in FLIP animations
fbf4cbf 
- divide the getBoundingClientRect dimensions by clientHeight or clientWidth
  - this gives us the element's scaled values as scaleX and scaleY
- divide the "dx" and "dy" by the "scaleX" and "scaleY"

This aims to fix sveltejs#3555 by using the node's un-scaled width/height to
calculate the amount it has been scaled. Then dividing the distance by
this scale factor removes the janky start position which was shown in
the test case.

resolves sveltejs#3555
@simeydotme
Copy link
Contributor Author

hi @Conduitry ... I believe I have a fix for this issue in my branch; simeydotme@fbf4cbf

I followed the instructions in the repo. I had an issue with the tests, though; I'm on windows and it seems that Pupeteer had problems launching Chrome post-test. Also two tests were failing before I touched any code: before-all and after-all.

Aside from that everything went smoothly considering I've never touched TypeScript before; Testament to Svelte's simple structure and design!

Below is the compare. Should I just submit a PR, or wait for someone to review this issue again?
master...simeydotme:3555-fix-flip-scaling

Thanks.

@simeydotme simeydotme mentioned this issue Sep 27, 2019
Merged
4 tasks
Rich-Harris added a commit that referenced this issue Nov 15, 2019
@Rich-Harris
Merge pull request #3627 from simeydotme/3555-fix-flip-scaling
05cf649 
Fix #3555 ; scale elements in FLIP animations
mvolkmann added a commit to mvolkmann/svelte that referenced this issue Jan 11, 2020
@mvolkmann
backed out change from commit fbf4cbf (Fix sveltejs#3555) by simeydotme
e032384
@Conduitry Conduitry mentioned this issue Jan 11, 2020
Closed
@simeydotme
Copy link
Contributor Author

This issue is present again after #6658

@simeydotme simeydotme mentioned this issue Jan 30, 2022
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix #3555 ; scale elements in FLIP animations simeydotme/svelte
2 participants
@simeydotme @Conduitry