Skip to content

fix: add unit to --y CSS variable to fix vertical drag#1277

Open
janpaepke wants to merge 1 commit intofkhadra:mainfrom
janpaepke:fix/vertical-drag-unitless-css-var
Open

fix: add unit to --y CSS variable to fix vertical drag#1277
janpaepke wants to merge 1 commit intofkhadra:mainfrom
janpaepke:fix/vertical-drag-unitless-css-var

Conversation

@janpaepke
Copy link
Copy Markdown

Problem

draggableDirection: 'y' has no visible effect — the toast fades via opacity but doesn't visually move during drag.

Cause

The --y CSS custom property is initialized as unitless 0 in .Toastify__toast:

.Toastify__toast {
  --y: 0;
}

This works fine in bare transform contexts like translate3d(0, var(--y), 0), where unitless 0 is valid.

However, when draggableDirection is 'y', the drag handler in useToast.ts builds:

`0, calc(${drag.delta}px + var(--y))`

This produces calc(50px + 0), which is invalid CSScalc() requires compatible units on both operands. The browser silently ignores the invalid transform, so the toast stays put while only the opacity changes.

Fix

Change --y: 0 to --y: 0px. This fixes vertical dragging with zero impact on existing behavior, since 0 and 0px are identical in all non-calc contexts. The stacked toast JS already sets --y with px units via setProperty("--y", ${k}px), so this aligns the initial value with runtime values.

Reproduction

  1. Set draggable: true and draggableDirection: 'y' on a toast
  2. Drag the toast vertically — it fades but doesn't move
  3. Apply --y: 0px via devtools — drag now moves the toast as expected

`--y` is initialized as `0` (unitless), which works in bare
`translate3d(0, var(--y), 0)` contexts. However, when
`draggableDirection` is `'y'`, the drag handler builds
`calc(${delta}px + var(--y))` — and `calc()` requires compatible
units on both operands. `calc(50px + 0)` is invalid CSS, while
`calc(50px + 0px)` is valid.

This causes vertical drag to have no visible effect — the toast
fades via opacity but doesn't move, because the transform is
silently invalid.

Changing `--y: 0` to `--y: 0px` fixes vertical dragging with no
impact on existing behavior, since `0` and `0px` are identical
in all non-calc contexts.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant