taye / taye/interact.js

Inertia sometimes goes backwards when applying restrictEdges modifier inside aspectRatio modifier

Open
#997 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
12.9k
Forks
804
PR merge metrics
No merged PRs in 30d

Description

While trying to figure out a workaround for #805, I came across a strange issue with inertia while trying to combine aspectRatio and restrictEdges. This only seems to occur if the restrictEdges modifier is applied inside the aspectRatio modifier; if the two are separately applied in any order, one will sometimes fail to be respected (as the docs warn), but this issue with inertia does not occur.

Minimal JSFiddle: https://jsfiddle.net/t2nore5h/2/

Expected behavior

While resizing the blue div, if the mouse button is released while the cursor is accelerating in any direction, the div should continue to be resized in that same direction for a bit.

Actual behavior

When resizing the blue div, the direction of resizing shifts backwards while inertia is being applied. This happens when resizing the div either horizontally or diagonally; in testing, I was only able to get this to happen when resizing vertically with a very high acceleration.
This is easiest to notice if the div at its minimum size, and it is attempted to be resized smaller with inertia; the div should not change size, but it will in fact get bigger!

System configuration

interact.js version: 1.10.17
Browser name and version: Chrome Version 110.0.5481.105 (Official Build) (64-bit)
Operating System: Windows 11

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the JSFiddle with interact.js 1.10.17, combining the aspectRatio and restrictEdges modifiers with inertia. Read the modifier interaction and inertia behavior around this configuration. Done means resizing continues in the released direction without reversing, including at the minimum size.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.