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

[janpaepke]

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 CSS — calc() 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

[fkhadra]

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

[janpaepke]

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 CSS — calc() 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

[fkhadra]

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

[janpaepke]

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 CSS — calc() 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

[fkhadra]

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

[janpaepke]

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 CSS — calc() 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

[fkhadra]

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

[janpaepke]

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 CSS — calc() 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

[fkhadra]

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

[janpaepke]

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 CSS — calc() 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

[fkhadra]

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

[janpaepke]

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 CSS — calc() 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

[fkhadra]

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

[janpaepke]

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 CSS — calc() 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

[fkhadra]

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