fix: add unit to --y CSS variable to fix vertical drag#1277
Open
janpaepke wants to merge 1 commit intofkhadra:mainfrom
Open
fix: add unit to --y CSS variable to fix vertical drag#1277janpaepke wants to merge 1 commit intofkhadra:mainfrom
janpaepke wants to merge 1 commit intofkhadra:mainfrom
Conversation
`--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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
draggableDirection: 'y'has no visible effect — the toast fades via opacity but doesn't visually move during drag.Cause
The
--yCSS custom property is initialized as unitless0in.Toastify__toast:This works fine in bare transform contexts like
translate3d(0, var(--y), 0), where unitless0is valid.However, when
draggableDirectionis'y', the drag handler inuseToast.tsbuilds:`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: 0to--y: 0px. This fixes vertical dragging with zero impact on existing behavior, since0and0pxare identical in all non-calc contexts. The stacked toast JS already sets--ywith px units viasetProperty("--y",${k}px), so this aligns the initial value with runtime values.Reproduction
draggable: trueanddraggableDirection: 'y'on a toast--y: 0pxvia devtools — drag now moves the toast as expected