Skip to content

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

Closed
janpaepke wants to merge 1 commit intofkhadra:next-v11.1from
janpaepke:fix/vertical-drag-unitless-css-var
Closed

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

Conversation

@janpaepke
Copy link
Copy Markdown
Contributor

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.
@fkhadra fkhadra changed the base branch from main to next-v11.1 April 19, 2026 15:11
@fkhadra
Copy link
Copy Markdown
Owner

fkhadra commented Apr 19, 2026

Hey @janpaepke thanks for the fix! Your commit has been merged to #1285

@fkhadra fkhadra closed this Apr 19, 2026
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.

2 participants